学习移动端的必备知识（适配篇）

灰灰呀_
569 阅读4分钟

一、前言

本篇文章主要讲的关于移动端适配相关的知识内容

二、视口

在我们编写移动端的时候，需要设置meta标签，设置一些视口相关的属性

<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />

上述代码中

  • width 设置的是 layoutviewport 的宽度，即布局视口

  • initial-scale 设置页面的初始缩放值，并且这个初始缩放值是相对于理想视口缩放的，最终得到的结果不仅会决定 视觉视口，还会影响到布局视口

  • user-scalable 是否允许用户进行缩放的设置

三种视口

上面提到了三种视口，下面来认识下：

  • 布局视口
  • 视觉视口
  • 理想视口

布局视口

从下面图可以看到，布局视口的内容太大了，用户根本无法查看全部的内容

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取

布局视口是将视口与移动端浏览器屏幕宽度完全独立开，下面设置布局视口宽度

<meta name="viewport" content="width=400">

再通过document.documentElement.clientWidth / Height获取则变成400

视觉视口

视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口

理想视口

从上面布局视口、视觉视口，我们都可以发现它们都不是一个理想的状态

用下面的方法可以使布局视口与理想视口的宽度一致：

<meta name="viewport" content="width=device-width">

意义

viewport 的设置不会对 PC 页面产生影响，但对于移动页面却很重要

  • 媒体查询 @media 响应式布局中，会根据媒体查询功能来适配多端布局，必须对 viewport 进行设置，否则根据查询到的尺寸无法正确匹配视觉宽度而导致布局混乱。如不设置 viewport 参数，多说移动端媒体查询的结果将是 980px 这个节点布局的参数，而非我们通常设置的 768px 范围内的这个布局参数
  • 由于目前多数手机的 dpr 都不再是 1，为了产出高保真页面，我们一般会给出 750px 的设计稿，那么就需要通过设置 viewport 的参数来进行整体换算，而不是在每次设置尺寸时进行长度的换算。

二、像素

物理像素（physical pixel）

手机屏幕上显示的最小单元，该最小单元具有颜色及亮度的属性可供设置。（屏幕上有多少个发光二极管）

设备独立像素（density-indenpendent pixel）

此为逻辑像素，计算机设备中的一个点，css 中设置的像素指的就是该像素。老早在没有 retina 屏之前，设备独立像素与物理像素是相等的

举个例子，iPhone 6的物理像素是750 * 1334，在Safari里打印一下screen.width和screen.height就知道逻辑像素是 375 * 667，则dpr为2

设备像素比（device pixel ratio）

设备像素比（dpr） = 物理像素/设备独立像素。如 iphone6、7、8 的 dpr 为 2，那么一个设备独立像素便为 4 个物理像素，因此在 css 上设置的 1px 在其屏幕上占据的是 2个物理像素，0.5px 对应的才是其所能展示的最小单位

通过window.devicePixelRatio可以获取设备像素比

三、1px像素问题

在移动端，我们常常遇到这种情况： 你想画个1px的下边框，但屏幕硬是塞给你一条宽度为2—3个物理像素的线

这里给出两个两个解决方案思路

  • 让一个物理像素，显示一个逻辑像素的内容 (此方法会让页面显示性能降低)
document.write('<meta name="viewport" content="width=device-width,initial-scale='+ 1/window.devicePixelRatio +',user-scalable=no">');
  • transform: scale(0.5/0.33)
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-bt-1px(@color) {
        position: relative;
        &::after {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: @color;
            transform: scaleY(0.5);
        }
    }
}

四、结束语

如果觉得这篇文章对你有帮助，可以伸出你的小手，为这篇文章点个赞

我是前端路上一位新晋的萌新，怀着学习的态度，怀着认识各位同伴的心态，把自己的知识分享出来，除了让自己对知识认知更加巩固，也希望大家能够通过我写的文章学到一点微薄的知识，如果知识内容有误，可以在评论区或者下面公众号告诉我，我会立刻更改

最后，我也创建了一个 【前端收割机】的公众号，希望大家可以关注一波，里面的文章都是掉头发之作

avatar
文章
阅读
粉丝