–我对移动端适配的了解

不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。

我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。but，我们要对于市面上的手机各式各样的分辨率进行适配，刚接触移动端开发的时候是不是有点猝不及防哈哈，尤其是去年年中以前老版本的微信内置浏览器用的X5内核，给网友们戏称移动端IE…

今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结，下面正式开始。

物理像素（设备像素） 屏幕的物理像素，又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了，是固定不变的。 设备独立像素 设备独立像素也可以理解为CSS像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 设备像素比 设备像素比简称为dpr，dpr = 物理像素 / 设备独立像素。(以iphone6为例: dpr = 750 / 375 , 所以它的像素密度比为2，即 1个CSS像素 跨越了 2个物理像素)，我们可以通多 window.devicePixelRatio 来获取设备的像素密度，像素密度大于1就是高清屏。 CSS像素 在CSS、JS中使用的一个长度单位，单位px。 注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px(高清屏)。

布局视口（layout viewport 可以看作是html元素的上一级容器即顶级容器，默认情况或者将html元素的width属性设为100%时，会占满这个顶级容器，此时用 document.documentElement.clientWidth 获取到html元素的布局宽度也就是布局视口的宽度，使用媒体查询时 max-width 和 min-width 的值指的也是布局视口的宽。 在html中一般在meta中的name为viewport字段就是控制的布局视口。布局视口一般都是浏览器厂商给的一个值。在手机互联网没有普及前，网络上绝大部分页面都是为电脑端浏览而做的，根本没有做移动端的适配。 随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。而电脑端页面宽度较大，移动端宽度有限，要想看到整个网页，会有很长的滚动条，看起来非常麻烦。于是浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口设置的很大，一般在768px ~ 1024px 之间，最常用的宽度就是 980。 这样用户就能看到绝大部分内容，并根据具体内容选择缩放。 故布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。一块手机屏幕，物理像素的数量是固定不变的。 视觉视口的大小是继承自布局视口的大小，视觉视口和布局视口的宽度为CSS的px数(可变的)。

理想视口 布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。所以苹果引入了理想视口，它对设备来说是最理想的布局视口，用户不需要对页面进行缩放就能完美的显示整个页面。最简单的做法就是使布局视口宽度设置为手机屏幕的宽度。移动端到底怎么适配不同的屏幕呢？最简单的方法是设置如下视口：

name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">```

if(/Android (d+.d+)/.test(navigator.userAgent)){ var version = parseFloat(RegExp.$1); if(version>2.3){ var phoneScale = parseInt(window.screen.width)/640; if(/MZ-M571C/.test(navigator.userAgent)){ document.write('<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-scale= 0.5">'); }else if(/M571C/.test(navigator.userAgent)&&/LizhiFM/.test(navigator.userAgent)){ document.write('<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-scale= 0.5">'); }else{ document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">'); } }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } }else{ document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); }

var devicePixelRatio = window.devicePixelRatio; var isIPhone = window.navigator.appVersion.match(/iphone/gi); var dpr,scale; if (isIPhone) { if (devicePixelRatio >=3) { dpr = 3; } else if (devicePixelRatio >=2) { dpr = 2; } else { dpr = 1; } } else { dpr = 1; } scale = 1 / dpr; ``` 淘宝只对iphone做了缩放处理，对于android所有dpr=1，scale=1即没有缩放处理。

此方案与方案三相似，增进了viewport缩放使得在iphone上1px(css) = 1px(物理像素)，这套方案能百分比还原设计稿。 Flexible实现手淘H5页面的终端适配 方案五： 可以来看看我总结的 ： 大漠老师最新的vw移动端适配方案

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-03-08，如有侵权请联系 cloudcommunity@tencent.com 删除

相关知识

移动端
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
手机移动端快速开发
Html+Css+js实现春节倒计时效果（移动端和PC端）
移动Web实训DAY
一分钟告诉你建行移动端网络学习怎么学
简约排版鲜花植物类移动端店铺首页
基于深度卷积神经网络的移动端花卉识别系统
移动应用开发
基于移动端的多特征花卉识别系统

网址: –我对移动端适配的了解 https://www.huajiangbk.com/newsview948586.html