移动端页面开发总结

准备工作：

两个像素：设备像素+css像素

设备像素：

绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。

css像素：

适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。

页面的缩放：

当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变

如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍

页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算)

设备像素比（DPR）：

在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 / 视觉视口css像素个数(device-width)

对于不同的设备来说设备像素比是不一样的。在早期iphone的DPR值是等于1的，但是后来引入了高密度屏幕，即为了更清晰的展示画面，在有限的设备空间内引入了更多的设备像素。所以后来iphone设备的DPR就改变了，值一般为2

场景再现：

移动端需求：给你一个750px的设计稿，上面画了一个200px的矩形框。

既然是写移动端页面，作为一名前端开发者，我想你们首先就会在里面敲下这样一句话：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

看上去只有那么熟悉了。这句话什么意思？它有什么作用呢？别着急，我们先来理解下viewport这个概念。

viewport：

viewport即视口，它的作用是限制页面的根元素

在PC端，视口可以看成只有一个，即我们所看到的页面窗口，它的大小由浏览器窗口来决定

但是在M端视口分为两类：视觉视口（visual viewport）和布局视口（layout viewport）

既然M端做了这样的划分，我们也可以对PC端采取同样的方式，即PC端viewport就是PC端的visual viewport

所以，对于PC端来说，根元素的大小就可以由visual viewport来确定了。那么，怎么计算呢？下面分情况给出相应的计算方式：

1：浏览器没有出现（横向、纵向）滚动条且没有人为的去设置元素的宽高（html的宽高可以人为的去设置，但是一般情况下我们不建议这样做）：

html的宽度 = document.documentElement.clientWidth = document.documentElement.offsetWidth = window.innerWidth

2：浏览器出现滚动条且没有人为的去设置元素的宽高：

html的宽度 = document.documentElement.clientWidth = document.documentElement.offsetWidth = window.innerWidth - 滚动条的宽度

3：人为设置了的宽度时：

html的宽度 = document.documentELement.offsetWidth

如此，PC端就可以按照其viewport的尺寸进行页面的布局

有了上面的基础，我们接下来看看M端页面。M端较之于PC端，一个显然的不同就是设备的尺寸。M端的屏幕宽度大多<=400px，不像PC端那样，动不动就是上千像素。这样PC端的页面到了移动端，可谓是不堪入目

在没有做M页面优化的情况下，PC端页面放到M端时，为了让你看清整个页面，强行把里面的内容进行缩放，以至于模糊不清，简直无法直视

如何解决M端设备尺寸太小的问题呢：

既然移动端的视觉视口太窄（浏览器的宽度）而不能满足css布局的需求，那么就想办法弄一个更宽的视口出来，满足M端布局需求。此时，layout viewport应运而生。

布局视口比视觉视口要宽的多，M端就是根据布局视口来进行css布局的。而且在M端，元素的大小是由布局视口来确定的，就像我们之前谈到的PC端和视觉视口的关系那样。那么，布局视口到底有多大呢，以及他是怎样去计算的呢？

对于M端来说，其布局视口的大小取决于浏览器厂商，一些常见的布局视口取值如下表所示：

跟PC端有点类似，布局视口的大小可有下面的方式取得：

布局视口的宽度 = document.documentElement.clientWidth
布局视口的高度 = document.documentElement.clientHeight

我们想要怎样一种效果呢？应该是这样：我们不想页面出现滚动条，而且想要页面所有的内容都呈现在我们的视野范围内。即要是我们能够自己去控制M端布局视口的大小就好了，让它以一个用户比较舒适的大小呈现在屏幕上，标签帮我们完成了这一举动，让我们继续看看吧。

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

是不是很熟悉，对啦，我们在文章的开头时曾写过。关于viewport我们不再解释，下面简单说一下content里面的内容。content属性的值是一个字符串，字符串里面的内容是由逗号隔开的名值对，一共5个：

width：布局视口的宽度，可以自己设定准确的值如width=300，也可以是一些特殊值，如width=device-width，顾名思义就是设备的宽度
initial-scale：设置页面的初始缩放程度，可以是小数
minimum-scale：设置页面的最小缩放程度
maximum-scale：设置页面的最大缩放程度
user-scalable: 是否允许用户对页面进行缩放

所以，列子中代码的含义就是，设置布局视口的宽度为设备的宽度，页面的初始缩放比例、最小缩放比例以及最大缩放比例值为1，不允许用户缩放页面。

好了，写到这里，大家或多或少对有了一定的了解吧，下面我们就开始真正的移动端页面开发了

我们在750px的设计稿（其实这也是现在iPhone6/7的设计稿样子）上看到了一个宽高都是200px的绿色矩形框

于是我们这样设计代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>移动端页面开发</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .weekend {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="weekend"></div>
</body>
</html>

咋一看，哎，不对呀，矩形框的宽高没有问题，但是设计稿上的设备宽度是750，而浏览器显示的宽度则是375，这是怎么回事呢？

其实，设计稿是按照设备像素去设计的，所以在页面缩放比为1的情况下，根据公式：

DPR = 设备像素/视觉视口css像素个数(device-width)

在iphone7上DPR=2，所以2个css像素等效于2个设备像素，所以对于矩形框的宽度，应该设为200/2=100px

但是，如果我们不想每次都去计算真正的css像素值，而是让浏览器自动去计算呢。别忘了，我们前面提到的中content的值initial-scale，它缩放的是css的像素，所以利用这个特性，设置initial-scale = 1/DPR,此时M端一个设备像素就等于一个css像素了，这样我们就可以直接将设计稿上的像素值设为css的像素值，而不用人为的去计算了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>移动端页面开发</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .weekend {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="weekend"></div>
    <script>
        var scale = 1/window.devicePixelRatio;
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', user-scalable=no')
    </script>
</body>
</html>

这下好了，好像达到我们想要的效果了，可是为什么说好像呢，看到这里的朋友不知道有没有想过这样一个问题，假如现在你不是iphone7的设备，而是iphone5，他们的DPR值都为1，但是设备的宽度却是不一样的。然而我们的代码设计并没有考虑到这样的情况。

果然，iphone5上还是100px,这该如何是好呢？我们应该留意到了这样一个现象，随着设备的宽度在变化，因为我们设置了页面布局视口的宽度值等于device-width，而html的宽度又是由布局视口所决定的（document.documentElement.clientWidth），所以只要我们想到有什么办法能让页面中元素的宽度能够随着根元素的变化而变化，这样我们就能够达到想要的效果了。是的，没错，就是rem，我想对于rem这个概念应该并不陌生吧。简单来说，rem是一个相对单位，是相对于html字体大小的单位。举个例子：当我们设置html {font-size: 10px}时，设置页面某个div {width: 2rem}，此时div经过计算后的宽度就等于2*10即20px。所以，通过rem的这个功能，我们就可以实现我们想要的效果了。开始写吧，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <title>移动端页面开发</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .weekend {
            width: 2rem;
            height: 2rem;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="weekend"></div>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

来源：https://www.cnblogs.com/QianBoy/p/8562232.html

标签

viewport

移动互联网终端

前端开发

页面布局