New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

移动端适配方案(上) #17

Open
riskers opened this Issue Jan 19, 2016 · 14 comments

Comments

10 participants
@riskers
Owner

riskers commented Jan 19, 2016

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

像素

在移动端给一个元素设置 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 是可以通过 分辨率屏幕尺寸 计算得到的:

ppi

这个网站列出了很多设备的分辨率屏幕尺寸,并且计算了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 testsUnderstanding viewport可以测试你的设备的screen.width值,同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器(如UC、Chrome)之间。

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

安卓webkit

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

缩放

缩放与设备像素、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=1width=device-width的效果是一样的。

完美视口

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

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

设备像素比

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

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

dpr = 设备像素 / CSS像素

可以通过JS得到: window.devicePixelRatio

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

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

总结

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

参考文章

下面这些文章可能也会对你有帮助:


向我捐助 | 关于我 | 工作机会


@xuejinwei

This comment has been minimized.

Show comment
Hide comment
@xuejinwei

xuejinwei Jan 25, 2016

iphone5的分辨率是 640pxx1136px吧,pt,也就是逻辑“点”是:320ptx568pt。

xuejinwei commented Jan 25, 2016

iphone5的分辨率是 640pxx1136px吧,pt,也就是逻辑“点”是:320ptx568pt。

@riskers

This comment has been minimized.

Show comment
Hide comment
@riskers

riskers Jan 25, 2016

Owner

@xuejinwei

iPhone5 的分辨率是 640x1136,单位是物理像素,是指的屏幕上有多少个像素点。又因为它的设备像素比是2,所以CSS像素是 320px x 568px

其实Chrome开发者工具说明了一切:

Owner

riskers commented Jan 25, 2016

@xuejinwei

iPhone5 的分辨率是 640x1136,单位是物理像素,是指的屏幕上有多少个像素点。又因为它的设备像素比是2,所以CSS像素是 320px x 568px

其实Chrome开发者工具说明了一切:

@xuejinwei

This comment has been minimized.

Show comment
Hide comment
@xuejinwei

xuejinwei Jan 25, 2016

@riskers 明白了,前端和ios开发单位搞混了。

xuejinwei commented Jan 25, 2016

@riskers 明白了,前端和ios开发单位搞混了。

@silenaker

This comment has been minimized.

Show comment
Hide comment
@silenaker

silenaker Mar 10, 2016

文章看了两遍,第一遍没看多大明白,不过看了作者推荐的几个链接之后, 又自己用浏览器去验证基本上就明白了,感觉概念太多,不易理解,我觉得把浏览器里面的screen.width, window.innerWidth, window.devicePixelRatio这三个东西的关系搞明白就可以了, 视口的概念我觉得不要搞那么复杂,视口可以直接理解为手机屏幕,视口的宽度就是window.innerWidth, meta标签里的viewport属性,不管是对其缩放,还是直接对其宽度进行设置,最终是确定一个合理的window.innerWidth, 也就是使在不同设备上window.innerWidth的值大致接近或者相同,这样就做到了适配,手淘rem方案,它做到的就是对于iphone将window.innerWidth还原到实际物理像素宽度,而android则将window.innerWidth设置的与screen.width一致,然后用rem单位进行统一布局,用px进行针对各个设备的布局.初步理解,勿见怪

silenaker commented Mar 10, 2016

文章看了两遍,第一遍没看多大明白,不过看了作者推荐的几个链接之后, 又自己用浏览器去验证基本上就明白了,感觉概念太多,不易理解,我觉得把浏览器里面的screen.width, window.innerWidth, window.devicePixelRatio这三个东西的关系搞明白就可以了, 视口的概念我觉得不要搞那么复杂,视口可以直接理解为手机屏幕,视口的宽度就是window.innerWidth, meta标签里的viewport属性,不管是对其缩放,还是直接对其宽度进行设置,最终是确定一个合理的window.innerWidth, 也就是使在不同设备上window.innerWidth的值大致接近或者相同,这样就做到了适配,手淘rem方案,它做到的就是对于iphone将window.innerWidth还原到实际物理像素宽度,而android则将window.innerWidth设置的与screen.width一致,然后用rem单位进行统一布局,用px进行针对各个设备的布局.初步理解,勿见怪

@riskers

This comment has been minimized.

Show comment
Hide comment
@riskers

riskers Mar 10, 2016

Owner

@silenaker 我是写的啰嗦了一点 😭

Owner

riskers commented Mar 10, 2016

@silenaker 我是写的啰嗦了一点 😭

@killsos

This comment has been minimized.

Show comment
Hide comment
@killsos

killsos Mar 28, 2016

屏幕像素密度:326dpi 屏幕像素密度(Pibel Per Inch)简称 ppi ,单位是 dpi(dot per inch) 个人觉得应该成为屏幕点密度 更适合

killsos commented Mar 28, 2016

屏幕像素密度:326dpi 屏幕像素密度(Pibel Per Inch)简称 ppi ,单位是 dpi(dot per inch) 个人觉得应该成为屏幕点密度 更适合

@Anneea

This comment has been minimized.

Show comment
Hide comment
@Anneea

Anneea May 4, 2016

不懂技术的人看起来好费劲,慢慢啃

Anneea commented May 4, 2016

不懂技术的人看起来好费劲,慢慢啃

@huangkesong

This comment has been minimized.

Show comment
Hide comment
@huangkesong

huangkesong Oct 14, 2016

本人小白一枚,让入手移动端项目 我现在用的工具是 webStorm 怎么样结合 less来写css。 我看上面提到的用less开发比较快!! 坐等回复!!!

huangkesong commented Oct 14, 2016

本人小白一枚,让入手移动端项目 我现在用的工具是 webStorm 怎么样结合 less来写css。 我看上面提到的用less开发比较快!! 坐等回复!!!

@riskers

This comment has been minimized.

Show comment
Hide comment
@riskers

riskers Oct 14, 2016

Owner

@huangkesong less 和编辑器没有关系,只是使用 less 的话,可以用 gulp 插件。不过,建议你现在使用 http://koala-app.com/index-zh.html 就够了

Owner

riskers commented Oct 14, 2016

@huangkesong less 和编辑器没有关系,只是使用 less 的话,可以用 gulp 插件。不过,建议你现在使用 http://koala-app.com/index-zh.html 就够了

@zhaoxixiong

This comment has been minimized.

Show comment
Hide comment

zhaoxixiong commented May 16, 2017

也可以看看这两篇文章
http://yunkus.com/meta-viewport-usage/
http://yunkus.com/physical-pixel-device-independent-pixels/
希望能作为本文的补充!

@crossyou

This comment has been minimized.

Show comment
Hide comment
@crossyou

crossyou Apr 10, 2018

总结部分:最后说明设备想告诉比 -> 最后说明设备像素比 是不是写错了。

crossyou commented Apr 10, 2018

总结部分:最后说明设备想告诉比 -> 最后说明设备像素比 是不是写错了。

@riskers

This comment has been minimized.

Show comment
Hide comment
@riskers

riskers Apr 10, 2018

Owner

@crossyou 谢谢 已修改

Owner

riskers commented Apr 10, 2018

@crossyou 谢谢 已修改

@MrStronger

This comment has been minimized.

Show comment
Hide comment
@MrStronger

MrStronger May 8, 2018

@media ... 700px指的是布局视口的宽度

@media中的宽度应该是可视区域 visual viewport吧?
https://www.w3.org/TR/css3-mediaqueries/#width

MrStronger commented May 8, 2018

@media ... 700px指的是布局视口的宽度

@media中的宽度应该是可视区域 visual viewport吧?
https://www.w3.org/TR/css3-mediaqueries/#width

@ShellyWang94

This comment has been minimized.

Show comment
Hide comment
@ShellyWang94

ShellyWang94 May 11, 2018

缩放部分:”缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素无论放大,还是200个CSS像素。但是因为这些像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。”这句话是不是有问题呢?第一句说放大或缩小css像素,后面举例说不会变?

ShellyWang94 commented May 11, 2018

缩放部分:”缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素无论放大,还是200个CSS像素。但是因为这些像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。”这句话是不是有问题呢?第一句说放大或缩小css像素,后面举例说不会变?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment