文档章节

聊一聊移动web分辨率的那些事儿

侯禹
 侯禹
发布于 2016/06/24 16:12
字数 2321
阅读 284
收藏 4
点赞 2
评论 1

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):

http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794

 

1 PC到移动,渲染的变迁


    在PC时代,我们书写CSS的时候,理所应当的认为,我们所书写的1px,在屏幕上就是1px的宽度。

    但是到了移动端,事情就不是这样了,我们所书写的1px,其实到了屏幕上,可能是2px,可能是3px。甚至是你想多少px就多少px。这是为什么呢?让我们来说一个故~~~事~~~~~

    苹果发布ios的时候,肯定会想到成千上万的PC网页,没法在自己的IOS系统上运行起来时间多么蛋疼的事情啊。但是呢,这些网页都是按照PC屏幕的大小写的呀。

    动不动就出现两个500多px的宽的div并列。这在当时640*960屏幕大小的iphone4上显示的话,简直是毁灭性的。(会各种折行,样式错乱),那么细致如苹果肯定不允许这种事情发生。

    于是苹果公司的攻城狮们想出了一个歪招,那就是告诉浏览器,“你在一个980宽的大屏幕下在渲染呢”,浏览器就按照了980宽的方式,渲染出来页面图像。可是到了浏览器这边,其实是拿到了一张渲染好的、比屏幕大的网页图像。此时,苹果再把这张图像,缩放一下,缩为屏幕大小。(我们平时也经常这样干,把一张大图片用双指放大缩小)

    

其实我们的开源中国就是这样的。。。。。

 

2 可以更改的布局宽度


上面所说的浏览器就按照了980宽的方式,渲染出来页面图像。浏览器的渲染依据,我们就称为layout viewport。其实我们可以指定欺骗浏览器的宽度是多少。

比如,我们默认的viewport宽度是980px,我们写了一个宽度为480的div,显示在网页上的时候,是这样(如图1.2.1所示): 

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h1 style="width:480px;background-color:#000;color:#fff;">测试</h1>
</body>
</html>

                                        图1.2.1

 

如果我们书写viewport标签,让其布局的时候,告诉浏览器,自己是一个宽度为480的小屏幕,又会怎样呢?(如图1.2.2所示)

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=480" />
</head>
<body>
    <h1 style="width:480px;background-color:#000;color:#fff;">测试</h1>
</body>
</html>

                                      图1.2.2

此时,浏览器就真的按照宽度为480的样子去渲染了。这就是viewport的魅力。这个viewpor的宽度是任我们更改的,究竟更改到多少才算合适呢?

大多数网站采取的方式是

width=device-width,就是别忽悠浏览器了,像PC上一样,手机屏幕多宽,浏览器就照着多宽去渲染吧。

这是一个比较好的方案,因为这下子,不会再有什么缩放问题了。设计就是按照手机去设计,显示也按照手机去显示,好看了很多(如图1.2.3)。

<html>
<head>
    <meta charset="utf-8" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <h1 style="width:320px;background-color:#000;color:#fff;">测试</h1>
</body>
</html>

                        图1.2.3

 

3. 再次变迁的像素


    时代是在变迁的,iphone也不例外,iphone3的像素为320*480,然而到了iphone4,虽然屏幕不曾变大,但是像素密度大大增加,变为了640*960,总不能把之前设计的网页都缩小一倍显示吧?所以苹果公司的老司机们就又开车了。

    iphone4对浏览器说,“我的宽度是320px”,其实iphone4是640px。我们按照320px的设计得以渲染,而到了真实的世界中,我们写的1px的元素,其实是化为2px渲染到用户面前的。有的同学可能会说,这不是把之前的网页变大了吗?

    nonono,别忘了,手机的大小并没有变,只不过是物理世界上的1英寸,上面的像素点数更多了。以前1px的屏幕像素点,展现在人眼面前是1/96英寸,像素密度变为两倍后,一个像素的宽度是1/96*2英寸。那么两个像素就是2*1/(96*2)=1/96英寸。物理世界上的宽度又变回来了。

    换句话说,虽然像素变大了,但是10px的图片在iphone3与iphone4上看起来是一样大的。

    在这里,我们已经学会了两个知识点:

    1. 320px的逻辑分辨率,对于我们来说,无论是iphone3gs还是iPhone4,我们都照着320px去写代码就好了,这是我们的逻辑。

    2. 320px/640px的物理分辨率,对于苹果手机来说,iphone3gs,他就真的按照320px去显示,640px的iPhone4,它就将我们写的逻辑分辨率乘以2再显示。这就是为什么iphone4上面物理分辨率是逻辑分辨率的两倍的缘故了。UE给你的图,你除以2去写代码就好了。

4. 又一次变迁


    话说,苹果公司在2014年,推出了新一代的iphone6/iphone6 plus,他们的屏幕都比iphone4要宽、要大。所以,再维持原来的320宽度方法,显然不行了。所以,苹果公司按照手机尺寸的比例,上调了分辨率:

4.1 iphone6的普通扩大

    我们看到上图,iphone6的宽为750px,iphone4的宽为640px(物理分辨率),比例应该是:750/640

iphone6的逻辑分辨率的宽是375px,iphone4的逻辑分辨率的宽为320px,比例是:375/320。

750/640 == 375/320,所以,苹果公司只是把手机普普通通的扩大了一点而已。顺便把逻辑分辨率也扩大了。

4.2 iphone6 plus的扩大高清度

    这次升级,最蛋疼的点就是iphone6 plus了,苹果公司希望更高清的屏幕,于是他们再一次施展大法,一块5.5英寸的屏幕上,竟然容得下宽度1080的像素点数量。

    但是,苹果的老司机们又犯难了,该如何“欺骗浏览器”呢?这次是朝着3倍的方向压缩的。即1个逻辑像素对应3个物理像素。但是,事实根本不是这样,他们只在与iphone4同样宽度的屏幕上,渲染出2.6个像素点,iphone4渲染出2个,iphone3gs渲染出1个

    所以,按照我们之前的理论,是不是逻辑像素就应该是1080/2.6呢。的确是的,1080/2.6~=414px,所以,我们的逻辑分辨率就被定格在了414*736。

    但是!2.6这个比例太蛋疼了,苹果是真心想让我们相信它家的屏幕好呀,于是苹果公司再一次施展欺骗大法,它让我们认为,他的屏幕是1242*2208的超级高清屏幕。于是,好像是在与iphone3同样的1px的屏幕尺寸里面,塞下了3个像素点。于是我们用1242除以3,还是得到了我们的逻辑分辨率:414px。而且,UE(设计师)们出一张1242的图片,工程师们将其除以3,远比UE们出一张1080px的图片,工程师将其除以2.6要爽得多。试想一下,除以2.6好算还是除以3好算?但是,iphone6s plus,实际的渲染是1080px,咋整?缩放呗,于是被浏览器渲染好的1242*2208的图像,被iphone6s plus给缩放成了1080*1920(就好像我们用手指头缩放过的图片一样)

    这个3倍还是2倍的比例,前端可以从浏览器中获取:window.devicePixelRatio

    结论就是,iphone6s plus,我们可以认为,它的物理分辨率是逻辑分辨率的三倍就好了,UE给你的图,你除以3去写代码就好了。

几代iphone手机的分辨率如图4.2.1所示:

                                                            图4.2.1

    这点,我有一篇文章进行了详解,有兴趣的同学可以详细进行了解:

    http://my.oschina.net/MrHou/blog/610984

 

5 是时候说说安卓了


    苹果的变迁史我们说完了,是时候说说更乱的安卓了。其实,了解完了苹果的机制,安卓的也并不难理解,这些零散的安卓设备,他们也都采用了物理像素是逻辑像素N倍的设计方法,当然,这个N是多少,就要看安卓的制造厂商了。总之,我们在安卓上的代码,也是按照逻辑像素渲染的。

6 课后问题


聪明的你,知道如何描述什么是逻辑分辨率,什么是物理分辨率了吗?

 

接下来的一篇文章,我将会和读者们一起聊聊iconfont那些事儿,不要走开,请关注我.....

原创文章,版权所有,转载请注明出处

© 著作权归作者所有

共有 人打赏支持
侯禹
粉丝 94
博文 49
码字总数 34362
作品 0
海淀
程序员
加载中

评论(1)

北鼻
北鼻
没下篇链接 差评
聊一聊百度移动端首页前端速度那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 这一期,咱们一...

侯禹
2016/07/06
4.4K
32
手机视频会议视频教学平台--ovmeet

ovmeet手机视频会议视频教学平台 这是一套完整的移动视频会议系统(全平台ovmeet视频开源) 1,包括服务端,开源基于red5, web客户端,手机客户端跨平台支持(IOS,android,黑莓) 调用代码(此...

ccall_cn
2014/06/25
9.5K
2
前端基础知识

Understanding ECMAScript 6 中文版(可下载电子书) Nicholas C. Zakas 大神的新著作,2016 年 8 月 30 日出版。 在 GitBook 页面上阅读本书全文,也可以下载 PDF 、 Mobi 或 ePub 格式的电...

掘金官方
2017/12/12
0
0
移动端IM中大规模群消息的推送如何保证效率、实时性?

本文原题为“大规模群消息推送如何保证实时性?”,来自瓜子二手车IM负责人:封宇,本次内容有修订,感谢原作者(原文链接在文末)。 1、编者注 众所周之,群聊是移动端IM的服务端技术难点所...

JackJiang2011
2017/11/20
0
0
移动端IM中大规模群消息的推送如何保证效率、实时性?

本文原题为“大规模群消息推送如何保证实时性?”,来自瓜子二手车IM负责人:封宇,本次内容有修订,感谢原作者(原文链接在文末)。 1、编者注 众所周之,群聊是移动端IM的服务端技术难点所...

JackJiang-
2017/11/20
158
0
那些年,我们经历过的 Java 事儿

温馨提示:本系列博文(含示例代码)已经同步到 GitHub,地址为「java-skills」,欢迎感兴趣的童鞋、,纠错。   在编程这条路上走的越久,我们遇到的事情就越多,磕磕绊绊在所难免,很多坑...

qq_35246620
2017/12/02
0
0
火车窗帘有两边,就伸手扯开了一边,还是膈着我靠墙的胳膊了

在深夜的火车上随着高速的移动快速闪过的星星点点,总是可以让脑子放空,想象出各种个样的话语;这是我不是很爱戴眼镜的原因,模糊着,模糊着,看的让自己,充斥着闲着的舒服; 又是一趟要开...

不说笑的erwan
2017/11/29
0
0
分布式系统的那些事儿(六) - SOA架构体系

有十来天没发文了,实在抱歉!最近忙着录视频,同时也做了个开源的后台管理系统LeeCX,目前比较简单,但是后续会把各类技术完善。具体可以点击“原文链接”。 那么今天继续说分布式系统的那些...

风间影月
2017/09/12
0
0
如何快速融入公司?从这份大数据开始

怎样快速融入公司? 也许是每个职场人都会遇到的问题 希望进入一家新公司便与同事 如同失散多年的兄妹 希望工作氛围融洽和谐 这样还未放飞的自己不会孤单 关于和贯科技 我们整理了一份 团队成...

和贯科技
2017/11/10
0
0
聊一聊前端存储那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 1 老朋友cooki...

侯禹
2016/07/12
173
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
2分钟前
0
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
21分钟前
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
48分钟前
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
49分钟前
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
今天
0
0
svn: Unable to connect to a repository URL 的解决方案

错误图示: 解决办法:清除本地保存的授权信息; 1:右键点击本地文件夹,选择设置; TortoiseSVN -> Settings 2:在弹出的对话框中选择 Saved Data, 右侧选择:授权地方清理所有。 然后点确...

宁哥实战课堂
今天
1
0
sleep与wait的区别

Thread.sleep(XXX)方法消耗CPU吗? 这个知识点是我之前认识一直有错误的一个知识点,在我以前的认识里面,我一直认为Thread.sleep(1000)的这一秒钟的时间内,线程的休眠是一直占用着CPU的时间...

码代码的小司机
今天
1
0
20位活跃在Github上的国内技术大牛 leij 何小鹏 亚信

本文列举了20位在Github上非常活跃的国内大牛,看看其中是不是很多熟悉的面孔? 1. lifesinger(玉伯) Github主页: https://github.com/lifesinger 微博:@ 玉伯也叫射雕 玉伯(王保平),...

海博1600
今天
1
0
Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
今天
1
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部