移动H5页面开发多屏适配 - viewport和像素篇

最近刚刚接触移动端的页面开发,遇到的第一个问题就是搞清楚多屏适配的方案。要知道多屏适配的原理就要知道移动端各种屏幕大小对开发的影响,最基础的是像素和 viewport 的概念。以下是网上一些像素及 viewport 的资料的知识梳理(绝大多数就是总结于 ppk 两篇谈论 viewport 的文章 onetwo,图片亦是出自于 ppk 的文章)。

在 pc 开发时代我们 css 用的最多的长度单位就是 px,通常我们认为 css 里面的像素就是屏幕的物理分辨率。其实 css 像素和屏幕的物理像素标准上并没有 1:1 的关系,只是在 pc 时代他们通常正好是 1:1,例外的情况极少,所以到了移动时代我们需要理清楚两者关系才能知道多屏适配方案的远离。让我们从 pc 时代说起。

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 的大小(随后被其他浏览器竞相效仿):,通过这个标签指定 width 可以控制 viewport 的大小,你可以写一个 css 像素的值譬如,但是理想情况下最好是和手机屏幕一样宽,也就是 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 都可以)。简单举个例子,当使用来设定手机浏览器 viewport 的宽度时,如果是同一个尺寸的屏幕无论分辨率是多少 viewport 都是一个固定的值。设备宽度(device-width)单位将不是物理像素,而是密度无关像素(dip)。这样大大减少了开发人员适配不同分辨率手机的工作量,无论你的手机分辨率是 320x480,还是 640x960,又或者是 960x1440,只要你写上,那么手机浏览器网页的初始化宽度都是 320px。

当然不是所有的手机 device-width 都是 320px,上面我只是举了简化的例子。随着手机越出越多,device-width 的值也越来越多,光 iphone 我们就可以通过 paintcodeapp.com 给出的这张图来看下,更不要说众多的 android 手机。

h5-part1-pic4.png

再提下 meta viewport 另外一个属性值就是 initial-scale,缩放比例。如果手机屏幕宽代表 320px(dip),那么这么设置 表示手机浏览器初始化 viewport 宽度是屏幕宽度且不进行缩放是为 320px,如果设置成表示手机浏览器初始化时候宽度是在屏幕宽度的基础上把页面缩小一倍,即 viewport 宽度是 device-width * 2 = 640px。这些变化我准备在下一篇总结,因为这些变化加上手机分辨率精度的上升直接影响着多屏适配的最终方案。

简单总结下移动端手机屏幕的尺寸像素值是密度无关像素dip,页面元素尺寸是 css 像素,当 时,两者的比例(dip:csspx)可以是1:1。是要多屏适配方案定下后,手机分辨率或者说物理像素基本不需要在开发时候考虑了。下一篇将推演下淘宝的 lib.flexible.js 是如何做多屏适配的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,061评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,947评论 1 255
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,744评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,878评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,601评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,696评论 1 175
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,324评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,120评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,921评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,459评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,234评论 2 214
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,558评论 1 226
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,203评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,088评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,460评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,604评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,975评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,460评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,536评论 2 229

推荐阅读更多精彩内容