移动端适配

eleven_11
2,262 阅读6分钟

像素

  • 设备像素/物理像素：由设备的屏幕决定，其实就是屏幕中控制显示的最小单位。
  • 设备独立像素/设备逻辑像素：是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素。
  • DPR（设备像素比）：设备像素比 = 设备像素 / 设备独立像素，如果设备像素大于设备独立像素（DPR大于1的设备，我们常说的高清屏或者Retina屏），就会出现一个设备独立像素对应多个设备像素的情况。

视口

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的。因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，

  • 布局视口（layout viewport）：是html元素的包容块，控制布局，是所有CSS百分比推算的根源。如果说CSS是一支画笔，那么布局视口就是那张画布吧。这张画布有一个默认尺寸（如果没有手动去设置meta viewport），一般在768px ~ 1024px间，可以通过document.documentElement.clientWidth获取。这样一来，网页的布局就不再受限于设备的尺寸，即使是小屏幕的移动端设备中也能容得下PC网站。
  • 视觉视口（ visual viewport）：指用户通过设备屏幕看到的区域，可以通过缩放来改变视觉视口的大小，并通过window.innerWidth获取。
    • 当放大屏幕时，视觉视口变小，因为视觉视口是通过CSS像素度量的，放大时，本来需要200个CSS像素才能占满屏幕，现在只要100个就能占满，所以视觉视口变小。但在移动端缩放不会改变布局视口。
布局视口控制css布局
视觉视口决定用户看到的网站内容，可缩放
  • 理想视口：理想视口就是设置布局视口和设备宽度一样， 可通过window.screen.width获取
    • 现在我们已经有两个viewport了：layout viewport 和 visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。
    • 完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。

<meta viewport>

元素可提供有关页面的元信息，不会显示在页面上，可以用来告诉浏览器怎样解析页面。可以设置的东西很多，但这里只讲vieport，它是所有移动适配方案的基础。

首先meta viewport的设置格式是 <meta name="viewport" content="name=value,name=value">，其中content里的name的值可设为：

  • width：将布局视口设置为固定的值，比如375px或者device-width（设备宽度）
  • initial-scale：设置页面的初始缩放
  • minimum-scale：设置最小的缩小程度
  • maximum-scale：设置最大的放大程度
  • user-scalable：设置为no时禁用缩放

initial-scale

缩放系数=理想视口宽度/视觉视口宽度

由于理想视口的宽度与设备宽度一致，所以设置缩放系数后，也就设置了视觉视口的宽度，而且会将布局视口初始化为这个视觉视口的值。

meta同时设置width和initial-scale

initial-scale相当于初始化了视觉视口和布局视口，但width用于指定布局视口的大小，那么一起设置的话听谁的呢？

以iPhone6为例，它的尺寸是667（h） * 375（w），如果设置，执行一下console.log(布局视口: ${document.documentElement.clientWidth}; 视觉视口: ${window.innerWidth})会得到“布局视口: 400; 视觉视口: 400”。 这时候旋转一下设备，这时尺寸变成了667（w） * 375（h），再执行一下console.log(布局视口: ${document.documentElement.clientWidth}; 视觉视口: ${window.innerWidth})会得到“布局视口: 667; 视觉视口: 667”。

结论是：width与initial-scale都会初始化布局视口，但浏览器会取其最大值。

设置理想视口

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

明明width=device-width和initial-scale=1都是去初始化布局视口成理想的布局视口，只写其中一个不就完了嘛，为什么要两个都一起写呢？因为有的浏览器只设置其中一个，不能保证理想视口的尺寸能随着屏幕的旋转而正确改变，所以两个一起写只是为了解决兼容性问题。

vw、vh

是一个相对单位，它相对的是布局视口。

  • vw：1vw=布局视口宽度/100
  • vh：1vw=布局视口高度/100

还原设计图

设计图一般是一ip6为原型，尺寸是设备像素，所以在写css是要除以2（dpr=2）

例子

实现1px物理像素的边框

资料

使用calc函数设置根节点的font-size

关于calc()函数

/* 基于UI width=750px DPR=2的页面 根节点的font-size=100px */
html {
    font-size: calc(100vw / 7.5); //(100vw/750)*100px
}
avatar
文章
阅读
粉丝