谈谈移动端屏幕适配的几种方法 - 腾讯优测 - 博客园
文/腾讯&莫振中
移动端web开发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用了腾讯优测进行软件测试后，问题得到了有效解决。
响应式布局
简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被&压缩&的空间。
如上图，其实就相当于页面被压矮了。
就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。
如上图，第一张是原设计稿，第二张把左右隐藏掉了一部分，第三张则是把上下隐藏掉了一部分。
Contain布局
同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。
如上图，红框部分为原始宽高比，根据不同屏幕尺寸进行缩放，并加背景填充。&
好了，接下来再说说常用的实现方法吧。
最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。
不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。
Rem是个好东西呀，谁用谁知道，这里就不多做解释了。原理跟上面的样式缩放相通，只不过是通过Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。
关于以Rem为单位进行开发，目前比较流行Font-size=62.5%，而后1rem=10px的这种方法，有试过直接换成px也是可以的，就看个人的计算习惯吧。
想了解更多干货，欢迎关注腾讯优测微信号：优测网（wxutest）
腾讯优测：
腾讯优测是备受客户信赖的移动云测试平台，为应用、游戏，H5混合应用的研发团队提供产品质量检测与问题解决服务。不仅在线上平台提供「云手机远程操控与调试」、「自动化全面兼容性测试」、「APK源码级缺陷性分析」等多种质量检测工具，更为VIP客户配备专家团队提供定制化综合测试解决方案。真机实验室配备上千款手机，覆盖市面98%主流机型，7*24小时在线运行，覆盖亿级用户。移动H5页面开发多屏适配 - viewport和像素篇 - 简书
移动H5页面开发多屏适配 - viewport和像素篇
最近刚刚接触移动端的页面开发，遇到的第一个问题就是搞清楚多屏适配的方案。要知道多屏适配的原理就要知道移动端各种屏幕大小对开发的影响，最基础的是像素和 viewport 的概念。以下是网上一些像素及 viewport 的资料的知识梳理（绝大多数就是总结于 ppk 两篇谈论 viewport 的文章 ，，图片亦是出自于 ppk 的文章）。
在 pc 开发时代我们 css 用的最多的长度单位就是 px，通常我们认为 css 里面的像素就是屏幕的物理分辨率。其实 css 像素和屏幕的物理像素标准上并没有 1:1 的关系，只是在 pc 时代他们通常正好是 1:1，例外的情况极少，所以到了移动时代我们需要理清楚两者关系才能知道多屏适配方案的远离。让我们从 pc 时代说起。
我们在做 pc 网页开发的时候几乎不涉及对 viewport 的修改，所以我们很少去关心 viewport，那么 viewport 指的是哪部分呢？我们知道一般一个 div 它的默认宽度是 100% 撑满其父节点，那么 body 下的 div 就是 body 的宽度，body 就是 html 的宽度，而 html 的宽度是由谁限定的呢？ 浏览器？又或者说是 window？其实正是一个叫 viewport 的东西，它才是默认情况下限定页面宽度的最外层“容器”。只是我们在做 pc 网页开发的时候默认情况下 viewport 和 window 是同样大小的。
viewport 的尺寸可以通过 document.documentElement.clientWidth/height 来获取，浏览器窗口的尺寸可以通过 window.innerWidth/height 来获取。viewport，浏览器窗口尺寸的单位都是 css 像素，但是他们含义有点不同。如果你放大一个网页时，你看到的页面元素虽然变大了，但是你用 js 获取他们的尺寸是没有变化的，也就是说元素的尺寸在 css 这个衡量的坐标系下并没有变化，100px 宽依然是 100px。只是电脑使得 css物理像素比增大了，原来1个 css 像素占1个物理像素，当你放大网页一倍的时候，1个 css 像素占用了4个物理像素。而浏览器窗口尺寸的含义是你这个窗口内可以容纳多少个 css 像素。譬如默认情况下如果你页面宽度是 1024px 宽占满了整个浏览器窗口，那么 window.innerWidth 就是 1024px。当你把网页放大一倍时，由于css物理像素比变大了，浏览器窗口从宽度角度看看只有原来一半的网页，也就是只能容纳 512 个 css 像素。你再去获取 window.innerWidth 它的值就是512。所以说 viewport 和浏览器窗口的尺寸都是以 css 像素作为单位的。顺便说下屏幕的尺寸是通过 screen.width/height 来获取的，原则上他们也是 css 像素为单位的，但是 pc 时代我们很少关心他们，也不能改变他们。在 pc 时代绝大多数情况下我们是在 css 像素和物理像素 1:1 的情况下开发的，所以我们也不太纠结我们页面元素尺寸的衡量体系。
iphone4 以前的手机屏幕无论是大小和分辨率都是很低的，iphone3 的分辨率是 320x480。如果在手机浏览器里面看 pc 的网页，而且如果手机浏览器依然使用css物理像素 1:1 的方式去显示网页，那么我们相当于只能在一个网页上画一个320x480 框框，用户使用这个框框来左右移动窥探这个网页，这显然是不好用的。
h5-part1-pic1.jpg
手机浏览器厂商就做了一个英明的决策，把手机浏览器默认的 viewport 的尺寸放大，譬如说 980px，而浏览器窗口默认情况下就是容纳一个 100% 宽的 viewport，所以如果一个 980px 宽的 pc 网页在手机端打开，默认情况下手机浏览器也能看到整个网页，只是这个网页是被缩小的。这个时候我们就能体会到 css 像素和物理像素的区别，手机分辨率宽虽然是320px的（物理像素），但是页面宽度确是980px（css 像素）。
h5-part1-pic2.jpg
但是这个时候还是依然不好用啊，pc 端的元素在手机端看太小点不到啊，用户在用的时候依然需要放大网页。如果针对手机的宽度设计一个网页那么不就解决这个问题了么，譬如把 viewport 设置成 320px 宽，在这个尺寸下给网页设计元素给网页排版。怎么设置 viewport呢？给 documnent.documentElement.width/height 赋值并没有作用，改变 html 元素的尺寸并不会影响 viewport 尺寸，只会造成如下的情况（html是变小了，但是 viewport依然很宽）：
h5-part1-pic3.jpg
苹果公司给出了一个 meta 标签用来控制 viewport 的大小（随后被其他浏览器竞相效仿）：&meta name="viewport" content="width=320"&，通过这个标签指定 width 可以控制 viewport 的大小，你可以写一个 css 像素的值譬如&meta name="viewport" content="width=320"&，但是理想情况下最好是和手机屏幕一样宽，也就是 device-width，这样 iphone3 初始化的 viewport 就是 320px 宽了。使用 meta 可以让我们在手机端也能做到在css物理像素 1:1 情况下开发网页。
h5-part1-pic3.1.jpg
但是随着 iphone4 的发布，人们发现其分辨率达到了惊人的 640x960，此时原来在 320 宽的标准下开发的网页在 iphone4 上怎么呈现，难道以后开发手机网页需要适配两个屏宽了？其实 google 已经在 android 系统上给出了一种叫密度无关像素的解决方案（density-independent pixel，或者叫 device-independent pixel，简称 dip，dp 都可以）。简单举个例子，当使用&meta name="viewport" content="width=device-width"&来设定手机浏览器 viewport 的宽度时，如果是同一个尺寸的屏幕无论分辨率是多少 viewport 都是一个固定的值。设备宽度（device-width）单位将不是物理像素，而是密度无关像素（dip）。这样大大减少了开发人员适配不同分辨率手机的工作量，无论你的手机分辨率是 320x480，还是 640x960，又或者是 960x1440，只要你写上&meta name="viewport" content="width=device-width"&，那么手机浏览器网页的初始化宽度都是 320px。
当然不是所有的手机 device-width 都是 320px，上面我只是举了简化的例子。随着手机越出越多，device-width 的值也越来越多，光 iphone 我们就可以通过
给出的这张图来看下，更不要说众多的 android 手机。
h5-part1-pic4.png
再提下 meta viewport 另外一个属性值就是 initial-scale，缩放比例。如果手机屏幕宽代表 320px(dip)，那么这么设置 &meta name="viewport" content="width=device-width, initial-scale=1.0"&表示手机浏览器初始化 viewport 宽度是屏幕宽度且不进行缩放是为 320px，如果设置成&meta name="viewport" content="width=device-width, initial-scale=0.5"&表示手机浏览器初始化时候宽度是在屏幕宽度的基础上把页面缩小一倍，即 viewport 宽度是 device-width * 2 = 640px。这些变化我准备在下一篇总结，因为这些变化加上手机分辨率精度的上升直接影响着多屏适配的最终方案。
简单总结下移动端手机屏幕的尺寸像素值是密度无关像素dip，页面元素尺寸是 css 像素，当 &meta name="viewport" content="width=device-width, initial-scale=1.0"&时，两者的比例（dip:csspx）可以是1:1。是要多屏适配方案定下后，手机分辨率或者说物理像素基本不需要在开发时候考虑了。将推演下淘宝的 lib.flexible.js 是如何做多屏适配的。&&9829 阅读
移动端屏幕适配viewport
pc上的网站在移动端上怎么办？
如果把移动端的可视区域(320-768)的话，大部分网站都会因为太窄而显示错乱；
所以浏览器默认把viewport设置为一个较宽的值 980px或1024px，至少保证PC网站在移动端上可以显示，只不过出现了横向滚动条而已。
html中度量的单位 用px来计算，在pc中往往 1 css px ＝ 1 物理像素
css像素时抽象和相对的了，在不同设备中1px对应不同的设备像素；iphone3分辨率是320*480 即 css 1px ＝ 1个物理像素；iphone4 分辨率640x960但屏幕尺寸没有改变，意味着同一块区域像素多了1倍 即 css 1px ＝2个物理像素；
表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像
显示器所能显示的像素多少，显示器可以显示的像素越多，画面就越精细，同样的屏幕区域能显示的信息就越多
devicePixelRatio
window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2个物理像素
devicePixelRatio在不同浏览器中存在一些兼容性问题，并不是完全可靠的
layout viewport
移动设备的默认viewport,css布局是以layout viewport 来做为参考系计算的
document.documenElement.clientWidth 获取
该尺寸时动态设置
visual viewport
代表浏览器窗口的尺寸，当用户放大浏览器时这个尺寸就会变小
window.innerWidth 获取
ideal viewport
屏幕尺寸 设备屏幕的尺寸 单位是物理像素
screen.width 获取 屏幕尺寸是不变的
在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容
设置移动端网站一般以这个viewport为准,ideal viewport 的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。
如何来实现屏幕适配
&meta name=&viewport& content=&width=device-width&&
meta viewport 中有6个通用属性：
width 设置layout viewport的宽度 正整数或字符串 'width-device'
initial-scale 设置页面的初始缩放值，数字或小数
minimum-scale 允许用户的最小缩放值 数字或小数
maximum-scale 允许用户的最大缩放值 数字或小数
height 设置layout viewport 的高度，这个属性很少用到
user-scaleabel 是否允许用户进行缩放 'no'或‘yes’
还有2个需要特别注意的两个属性
target-densitydpi 在andriod 4.0一下的设备中，不支持设置viewport的width，android 自带浏览器支持设置 target-densitydpi来达到目的；
target-densitydpi = UI-width/device-width*window.devicePixelRation*160
//UI-width: 布局宽度
//device-width:屏幕分辨率宽度 iphone4为640
//target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放
miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏
//移动页面设计 480*854的比例
//dpi = 480/screen.width*window.devicePixelRatio*160;
//scalevalue = screen.width/480;
//控制适配 分为5种组合
/* width ＋ target-densitydpi(计算出来的) */
&meta name=&viewport& content=&width=480,target-densitydpi=dpi,minimal-ui&&
/* width */
&meta name=&viewport& content=&width=480,minimal-ui&&
/* width+target-densitydpi=device-dpi */
&meta name=&viewport& content=&width=480,targrt-densitydip=device-dip,minimal-ui&&
/* width+initial-scale */
&meta name=&viewport& content=&width=480,initial-scale=scalevalue,maximum-scale=scalevalue,minimum-scale=scalevalue,minimal-ui&&
/* targrt-densitydpi */
&meta name=&viewport& content=&targrt-densitydpi=dpi,minimal-ui&&
//通过顺序设置5次来实现适配 直到
Math.abs(window.innerWidth-480)&=10 表示viewport设置正确了。
js代码控制
window.addEventListener(&orientationchange&,function () {
This.isOrietation =
This.changeOriention();
//建议执行横竖屏的事件都通过一个侦听完成，做一个统一的管理；在屏幕横竖屏切换完成之后再执行相应的事件
//定义横屏显示的样式
@media screen and(orientation:landspace){...}
//定义竖屏显示的样式
@media screen and(orientation:portrait){...}
//某个尺寸的特殊样式 竖屏时宽度为768px 符合一般ipad的条件
@media only screen and(orientation:portrait) and(device-width:768px){...}