移动端三种适配介绍

  编写移动端页面时,为了容纳为桌面浏览器设计的页面,默认的布局视口大小远远大于屏幕宽度(默认布局视口大小一般为980px),此时屏幕会缩放,导致字体很小,不适合用户浏览。为了得到更好的使用效果,我们会使用理想视口,使布局视口的大小等于设备独立像素的值,这样用户进入页面时,则无需缩放。

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

  但是,由于每种手机分辨率以及像素比不同,设置理想视口后,会导致同一页面在不同手机上的布局视口大小不同,此时,若直接使用 px 为单位进行页面布局,在不同手机打开页面容易发生布局混乱。
  针对这一问题,我们可以使用移动端适配来解决。

rem适配

使用 rem 为单位进行布局时,1rem 等同于 html 节点中 font-size 的大小,默认为 16px。

如下代码中,为 box 设置宽度为 10rem,则 box 的宽度会被计算为 160px。

1
2
3
#box{
width: 10rem;
}

rem适配的原理

  将 html 元素的 font-size 值设置为与设备独立像素(device-width)相关的值,如将 font-size 的大小设置为 device-width,则 1rem 的大小即为 device-width 的值,布局时使用 rem 为单位进行布局。
  如将一个 div 的宽度设置为 0.5rem,则无论使用何种手机打开,该 div 的宽度都将是该手机设备独立像素的值的一半。而不会发生布局混乱的问题。

通常情况下,将 1rem 的值设置为 device-width / 16 或 device-width / 10。

rem适配示例代码

1
2
3
4
5
6
7
8
(function () {
// 设置理想视口后,布局视口的宽度即为设备独立像素的值
var width = document.documentElement.clientWidth;
var styleH = document.createElement('style');
// 将 1rem 设置为 设备独立像素的值的 1/16
styleH.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
document.head.appendChild(styleH);
})();

viewport适配

viewport适配原理

  通过动态的改变屏幕的缩放比例(meta 标签中的 initial-scale 的值),使所有手机的布局视口的大小固定,此时布局时,只要使用 CSS 的像素值,不同手机将展示出相同的效果。
  缩放比例大小为设备独立像素的值与目标布局大小之比。

viewport适配示例代码

1
2
3
4
5
6
7
(function () {
var width = document.documentElement.clientWidth;
var targetwidth = 320; // 目标布局视口大小
var scale = width / targetwidth;
var meta = document.querySelector('meta[name="viewport"]');
meta.setAttribute('content','initial-scale=' + scale);
})();

1物理像素适配

  使用 1 物理像素适配的目的,是为了在设置边框时,能够设置边框的大小为 1 物理像素的大小。但是,由于现在手机屏幕的像素比普遍大于 1,1CSS 像素的大小通常大于 1物理像素的大小,导致我们使用CSS单位时,无法设置边框宽度为 1物理像素。

注意:边框宽度无法设置为小数值。

  为了解决这个问题,可以使用 1物理像素适配。

1物理像素适配的原理

  1 物理像素适配结合了 rem 适配和 viewport 适配的概念。通过动态的改变屏幕的缩放比例,使得 1CSS 像素的大小,等于 1物理像素的大小,此时布局视口的大小等于屏幕分辨率,然后设置 html 标签的 font-size 的值为屏幕分辨率的值,即使用 rem 适配。这样,可以让所有的布局元素使用 rem 为单位进行布局,边框使用 px 为单位。

initial-scale 的值等于 1/dpr(屏幕像素比),则 1CSS像素 等于 1物理像素。

1物理像素适配的示例代码

1
2
3
4
5
6
7
8
var scale = 1 / window.devicePixelRatio;
var meta = document.querySelector('meta[name="viewport"]');
meta.setAttribute('content','initial-scale=' + scale);

var width = document.documentElement.clientWidth / 16;
var styleW = document.createElement('style');
styleW.innerHTML = 'html{font-size: '+ width +'px;}';
document.head.appendChild(styleW);

rem适配和viewport适配对比

rem适配

  • 优点
    1. 可以使用理想标签
    2. 可以实现等比缩放
  • 缺点
    使用 rem 单位需要进行换算

viewport适配

  • 优点
    避免复杂的计算,可以直接使用 UI 的标准像素值
  • 缺点
    1. 不能使用理想视口
    2. 由于进行了缩放,图片失真情况严重
-------------本文结束感谢您的阅读-------------
Fork me on GitHub