移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）...

viewport（视口）

1. 具体数值（不设置时默认为980 ，部分安卓手机不支持设置成具体数值）
2. width=device-width 和设备宽度保持一致
3. user-scalable=no 是否允许用户缩放no/yes（iOS10不支持 近乎无解）
4. initial-scale 初始缩放比例
5. minimum-scale 最小缩放比例
6. maximum-scale 最大缩放比例

页面宽度

页面宽度=device-width/scale

在页面中实现等比像素的JS代码：

<!--利用页面的像素比来进行页面的缩放 显示等比像素 但每个设备不是相同宽度-->
<script type="text/javascript">
(function(){
    var meta = document.createElement("meta"); 
    var scale = 1/window.devicePixelRatio;
    meta.name = "viewport";
    meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale;
    document.head.appendChild(meta);
})();   
</script>

在页面中实现相同宽度显示的JS代码：

<!--页面宽度适配 显示相同宽度 但每个设备所显示的像素大小不一样-->
<script type="text/javascript">
(function(){
    var meta = document.createElement("meta");
    var width = window.screen.width; 
    var targetWidth = 320;
    var scale = width/targetWidth;
    meta.name = "viewport";
    meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale;
    document.head.appendChild(meta);

})();   
</script>

window.devicePixelRatio 像素比

[不可改变，只能获取]

1px的内容放大N倍显示

[像素比为2 整个页面的内容就被放大两倍显示]

分辨率：屏幕图像的精密度，是指显示器所能显示的点数的多少

分辨率越高，像素越大，在相同宽度下，屏幕所能显示出来的东西越多，但是显示出来就越小。

移动端布局

• 1em=当前元素的一个文字大小
• rem(root em) 1rem=html的一个文字大小
• [rem布局原理简单的来说就是把页面虚拟成一个网格,每行的格子的大小都是一致的，每行的格子也是固定的，我们在设置元素的尺寸的时候，不在固定使用PX，而是设置占了多少格格子,然后在根据页面宽度的不同，来修改每个格子的大小，从而使页面等比的缩放. ]
• 通过js获取页面的宽度

<script type="text/javascript">
(function(){
    var html = document.documentElement;//获取到HTML
    var width = html.clientWidth// 获取html的宽度
    //html.style.fontSize html的字体大小
    html.style.fontSize = width/10 + "px"; 
    //console.log(width);   
    // 1rem = 1个格子的大小
})();
</script>

• [ 使用rem时，注意页面接受的最小字体是12px,所以一般不会分超过25个格子,一般要适配最小的宽度是320 ]

转载于:https://www.cnblogs.com/Ivy-s/p/6850540.html