微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

移动端适配方案(上)

2017-01-28 21:51 前端大全

(点击上方公众号,可快速关注)


作者:伯乐在线专栏作者 - risker
http://web.jobbole.com/90075/

如有好文章投稿,请点击 → 这里了解详情


要搞懂移动端的适配问题,就要先搞明白像素和视口。


像素


在移动端给一个元素设置 width:200px 时发生了什么?这里的px到底是多长呢?像素是网页布局的基础,但是我们一直在用直觉使用它。


其实存在两种像素:


1. 设备像素


屏幕的物理像素,任何设备屏幕的物理像素的数量都是固定不变的,单位是pt。


2. CSS像素


在CSS、JS中使用的一个抽象的概念,单位是 px。


顺便说下,CSS像素也可以称为设备独立像素(device-independent pixels),简称为dips,单位是dp。


那么,我们现在再来说说一个元素 width:200px 以后会怎么样。这个元素跨越了200个CSS元素,200个CSS元素相当于多少个设备像素取决于两个条件:


  • 页面是否缩放

  • 屏幕是否为高密度


这两方面后面再解释,先梳理一下手机硬件之间的关系,注意这里使用的都是物理像素。


以 iPhone5 为例,我们已知的是:


  1. 分辨率:1136pt x 640pt

    指屏幕上垂直有 1136 个物理像素,水平有 640 个物理像素

  2. 屏幕尺寸: 4英寸

    注意英寸是长度单位,不是面积单位。4英寸指的是屏幕对角线的长度。

  3. 屏幕像素密度:326dpi

    屏幕像素密度(Pibel Per Inch)简称 ppi ,单位是 dpi(dot per inch)。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说,ppi越高越好,因为图像会更加细腻清晰。


ppi 是可以通过 分辨率 和 屏幕尺寸 计算得到的:



这个网站(https://www.sven.de/dpi/)列出了很多设备的分辨率和屏幕尺寸,并且计算了ppi。


视口


桌面浏览器中,浏览器窗口就是约束你的CSS布局视口(又称初始包含块)。它是所有CSS百分比宽度推算的根源,它的作用是给CSS布局限制了一个最大宽度,视口的宽度和浏览器窗口宽度一致。


但是在移动端,情况就很复杂了。


布局视口


一个没有为移动端做优化的网页,会尽可能缩小网页让用户看到所有东西。这是我的手机查看博客园的样子,你也可以在Chrome中以移动开发模式看到。



浏览器厂商为了让用户在小屏幕下网页也能够显示地很好,所以把视口宽度设置地很大,一般在 768px ~ 1024px 之间,最常见的宽度是 980px。


所以,在手机上,视口与移动端浏览器屏幕宽度不再相关联,是完全独立的,这个浏览器厂商定的视口被称为布局视口。



布局视口我们是看不见的,只知道网页的最大宽度是 980px ,并且被缩放在了屏幕内。


可以这样设置布局视口的宽度:


<meta name="viewport" content="width=640">


媒体查询与布局视口


700px 指的是布局视口的宽度


@media (min-width: 700px){

    ...

}


document.documentElement.clientWidth/Height返回布局视口的尺寸


视觉视口


视觉视口是用户正在看到的网页的区域,大小是屏幕中CSS像素的数量。



window.innerWidth/Height返回视觉视口的尺寸


理想视口


布局视口明显对用户是不友好的,完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念,它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度,用户进入页面的时候不需要缩放。


现在讨论所谓的『最理想的宽度』到底是多少?其实,如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口:


<meta name="viewport" content="width=device-width">


定义理想视口是浏览器的事情,并不能简单地认为是开发者定义的,开发者只能使用。


screen.width/height返回理想视口的尺寸,有严重的兼容性问题—可能返回两种值:


  1. 理想视口的尺寸(下载浏览器)

  2. 屏幕的设备像素尺寸(内置浏览器)


Screen size tests和Understanding viewport可以测试你的设备的screen.width值,同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器(如UC、Chrome)之间。


默认浏览器是安卓系统内置的浏览器,长下面那个样子。而且它使用的是Webkit而不是Blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3,Google不再更新。



而下载浏览器都返回的是理想视口尺寸。


缩放


缩放与设备像素、CSS像素的关系


缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素无论放大,还是200个CSS像素。但是因为这些像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。


缩放与视口


缩放会影响视觉视口的尺寸


页面被用户放大,视觉视口内CSS像素数量减少;被用户缩小,视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。


用户缩放不会影响布局视口


注意,这是『用户缩放』,后面会说开发者设置缩放的情况


缩放比例


我们在开发者工具中可以在这里查看缩放比例:



这里的 0.3 是相对于理想视口的。


在下载浏览器中,可以这么算(理想视口与视觉视口的比):


zoom level = screen.width / window.innerWidth


禁止缩放


<meta name="viewport" content="user-scalable=no">


设置缩放


<meta name="viewport" content="initial-scale=2">


使用initial-scale有一个副作用:同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1与width=device-width的效果是一样的。


完美视口


解决各种浏览器兼容问题的理想视口设置


<meta name="viewport" content="width=device-width,initial-scale=1">


设备像素比


在谈到像素的时候,讲到除了缩放,屏幕是否为高密度也会影响设备像素和CSS像素的关系。


在缩放程度为100%(这个条件很重要,因为缩放也会影响他们)时,他们的比例叫做设备像素比(device pixel ratio):


dpr = 设备像素 / CSS像素


可以通过JS得到: window.devicePixelRatio


设备像素比也和视口有关:


dpr = 屏幕横向设备像素 / 理想视口的宽


总结


这一篇介绍了移动端适配需要掌握的知识,先说明了移动端存在的两种像素,然后介绍了三种视口,由缩放对视口的影响引入理想视口,最后说明设备想告诉比。下一篇介绍现在市面上的适配方案。


参考文章


  • ppk的移动端系列文章

  • screen.width is useless

  • devicePixelRatio

  • More about devicePixelRatio

  • screen sizes 收集了很多手机的信息



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 纯CSS打造银色MacBook Air(完整版) CSS 最核心的几个概念 纯CSS打造银色MacBook Air(完整版) 纯CSS打造银色MacBook Air(完整版) Chrome开发者工具之JavaScript内存分析
猜您喜欢 雕爷传 创业团队的加班问题 iOS app兼容ipv6,测试需要做的事情 git flow精简模型 技术干货 | 贝塞尔曲线开发的艺术