移动端屏幕适配

移动端 H5 页面不可遗忘的 meta 标签 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

这行代码的作用是设置视口的宽度(其实就是页面的宽度)等于设备宽度,页面不缩放并且也不允许用户进行缩放。

把一个普通的PC端页面(未加入上面 meta 标签的)直接放在手机端访问是可以展示完全的,但是页面明显经过缩放。可以用 alert(document.body.clientHeight) 获取一下页面宽度,你会发现,大部分页面的宽度都是980px。再用alert(window.innerWidth)获取一下设备宽度,很明显,手机端自动将980px的页面缩放到了window.innerWidth的宽度才得以完全展示。但这不是我们想要的效果,我们想要的是未经缩放,以最佳样式展现的Web页面。每一个移动端页面都应该首先加入上面这行 meta 标签,这样才能确保页面得到了最佳的展现形式。

CSS 屏幕适配之媒体查询(media query)

PC 端常用的CSS测量单位是 px,而移动端常用的却是 rem。这样做的原因仍然是为了适配多种屏幕尺寸。怎么适配呢?首先需要弄清楚rem单位,rem是相对于DOM根元素(也就是)的字体大小的度量单位。比如说我们设置了 html{ font-size: 16px },然后给具体的DOM设置 p{ font-size: 2rem; height: 4rem; },其实就相当于设置了 p{ font-size: 2*16px; height: 4*16px; },也就是 1rem = 1*(html的fontSize)2.5rem=2.5*(html的fontSize)。这样就很清楚了,我们只需要控制不同屏幕尺寸下 html 的 fontSize,页面上所有使用 rem 度量的DOM的尺寸都会相应改变。比如以下适配代码:

html{font-size: 18px}
@media only screen and (min-width:360px){html{font-size: 20px!important}}
@media only screen and (min-width:375px){html{font-size: 21px!important}}
@media only screen and (min-width:400px){html{font-size: 22px!important}}
@media only screen and (min-width:414px){html{font-size: 23px!important}}
@media only screen and (min-width:480px){html{font-size: 24px!important}}
@media only screen and (min-width:540px){html{font-size: 26px!important}}
@media only screen and (min-width:640px){html{font-size: 28px!important}}
@media only screen and (min-width:768px){html{font-size: 32px!important}}
@media only screen and (min-width:960px){html{font-size: 36px!important}}
@media only screen and (min-width:1024px){html{font-size: 46px!important}}

上面一块代码的意思就是:

  1. 屏幕尺寸小于360px时,html 的 fontSize 就是18px;
  2. 当屏幕尺寸位于区间 [360px, 375px] 时,html 的 fontSize 就是 20px;
  3. 当屏幕尺寸位于区间 [375px, 400px] 时,html 的 fontSize 就是 21px;
  4. 以此类推,如果屏幕尺寸大于 1024px 的话,html 的 fontSize 都是46px。

上面CSS媒体查询是一个区间一个区间地进行适配的,当然也可以使用 JS 进行更精细的适配,但归根结底无非都是通过改变viewport的scale值和根节点html的fontSize值进行整体调整的。

设计师出 2 倍视觉稿,前端还原成 1 倍页面,是在瞎折腾?

这样做当然是有原因的,在解释这个问题之前,先介绍一些像素小知识。

  1. 物理像素(也叫设备像素)
    物理像素是显示器上最小的显示单元,电脑、电视、手机、平板这些电子设备的屏幕都是由一个个物理像素点组成的,连点成线,线再成面。在系统的调度下,每一个物理像素可以且仅可以显示单独的颜色值和亮度值。
    比如 iPhone5 的屏幕有 640x1136 个物理像素,注意到了吗,物理像素的总量其实就是所谓的分辨率。分辨率越高,物理像素点就越多,屏幕上能表现的颜色值就越多,画面就越细腻。

  2. 设备独立像素(也叫CSS像素,逻辑像素)
    设备独立像素的学术解释就是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素,然后由底层系统的程序转换为物理像素。怪不得都不喜欢去看这些学术性的解释,真的是佶屈聱牙,抽象难懂。
    其实在我看来,设备独立像素就是UI设计师设计工具(如Photoshop)中的像素,而UI设计师通常就在电脑上进行设计作业的,所以设备独立像素其实就是电脑屏幕上的物理像素。每一个设备独立像素可以表示一个或多个颜色值和亮度值。
    iPhone5 屏幕的设备独立像素数量是 320x568,为什么这么说呢,因为在普通电脑屏幕上,1 个设备独立像素是对应着 1 个物理像素的,你把 iPhone5 的屏幕贴在电脑屏幕上,那一块和iPhone5屏幕等大的电脑屏幕区域物理像素数量是多少,没错正好是320x568。嘿嘿,明白了吧,设备独立像素是设计师和前端工程师进行作业时的测量单位。

  3. 设备像素比(Device Pixel Ratio)
    DPR 的计算公式如下:

    设备像素比 = 设备像素/设备独立像素        // 在某一方向上,x方向或y方向

DPR
的意义就是用来表示设备会分配多少个物理像素来展示1个设备独立像素,一般是DPRxDPR个。比如由公式可计算出
iPhone5 的 DPR 为 2,那么 iPhone5 就会分配 2x2=4
个物理像素来展示1个设备独立像素。

其实现在市面上的很多机型 DPR 都是 2,也因此UI设计师为移动端所做的设计图通常是 2 倍图。为什么这样做呢,拿iPhone5来说吧,如果设计图尺寸是320x568也就是等于设备的逻辑像素数量,当然是可以的,但这样就浪费了硬件优势了,因为设计图上的1个CSS像素映射到手机屏幕上,手机屏幕会分配4个物理像素来展示它,很显然,4个物理像素的颜色值和亮度值都一样。而如果设计成2倍图,那就是等于设备的物理像素数量了,设计师可以尽情发挥,设计更细腻的画面,手机屏幕也可以充分发挥出高分辨率的优势。设计成2倍图会出现一个问题,比如本来一张图片是希望它在手机上呈现为 100x100(CSS像素)的尺寸,结果设计师把它设计成200x200(CSS像素)的,如果直接放在手机上,也会呈现 200x200(CSS像素)的,而不是100x100(CSS像素),就会显得非常大,这时候就轮到前端工程师隆重登场了,前端在还原设计图时所有尺寸都应该减半,也就是还原成1倍页面。比如设计图上的200x200(CSS像素)的尺寸,在页面上对应地写成100x100(CSS像素),这样它在页面上就会占据100x100个CSS像素了,手机系统会分配100x100x4个物理像素去展示这100x100个CSS像素,这样就可以充分展现设计图中的色彩信息了。

本文由明仕msyz手机版发布于情感专区-情绪智力,转载请注明出处:移动端屏幕适配

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。