layui移动端适配_移动端适配

前言

原文 && 个人主页

知乎&&知乎专栏

背景

随着移动端的普及，以及手机尺寸越来越多，这就衍生了众多的适配方案，以下挑一些常见的适配方案进行探讨。

本文默认读者已经对视口、物理像素、逻辑像素、css像素等移动端基本概念已经了解了。

px + viewport适配

这种适配方案原理比较简单：实际上就是通过动态设置meta标签的viewport让css中的1px等于设备的1px。

js伪代码：

const scale = 1 / devicePixelRatio

head.appendChild(`<meta name='viewport' content='width=device-width, initial-scale=${
    scale}, maximum-scale=${
    scale}, minimum-scale=${
    scale}, user-scalable='no'>`)

body.setAttribute('data-dpr', devicePixelRatio)

css伪代码