移动端适配
HTML5 viewport
在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。
使用meta标签时，可以添加viewport(可视区窗口)属性:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />1content中可填以下属性：
| 属性名 | 备注 |
|---|---|
| width | 设置可视区的宽度，为一个正整数，使用字符串”width-device”表示设备宽度 |
| initial-scale | 设置页面的初始缩放值 |
| minimum-scale | 允许用户的最小缩放值 |
| maximum-scale | 允许用户的最大缩放值 |
| height | 设置可视区的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许 |
| target-densitydpi | 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个 |
注意
target-densitydpi 属性为安卓特有，并且安卓已经决定要废弃这个属性了，所以这个属性我们要避免进行使用 。
meta标签扩展:
html
<!-- width=device-width //可视区宽等于设备宽 user-scalable=no禁止用户缩放，ios10无效 min/max 最小缩放比例和最大缩放比例-->
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<!-- 强制x5内核竖屏显示(QQ/微信/QQ浏览器内置的内核就是x5内核) content="landscape"强制横屏 -->
<meta name="x5-orientation" content="portrait">
<!-- x5内核浏览器全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- UC浏览器竖屏显示 -->
<meta name="screen-orientation" content="portrait">
<!-- UC浏览器全屏显示 -->
<meta name="full-screen" content="yes">
<!-- 禁止识别电话号码和邮箱 -->
<meta name="format-detection" content="telephone=no,email=no">百分比适配
百分比适配是通过给元素设置百分比的宽度进行适配，由于高度是固定的在不同分辨率的设备上显示也会有所差异
html
<style>
body{margin: 0;}
div{width: 25%;height: 100px;float: left;}
.div1{background: red;}
.div2{background: green;}
.div3{background: goldenrod;}
.div4{background: blue;}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>viewport适配(推荐)
通过js创建meta标签并动态计算缩放比例，使得每个设备的显示宽度统一
html
<script>
(function(){
// alert(window.devicePixelRatio);//弹出设备的像素比
// window.screen.availWidth 返回当前屏幕宽度(空白空间)
// window.screen.availHeight 返回当前屏幕高度(空白空间)
// window.screen.width 返回当前屏幕宽度(分辨率值)
// window.screen.height 返回当前屏幕高度(分辨率值)
// window.document.body.offsetHeight; 返回当前网页高度
// window.document.body.offsetWidth; 返回当前网页宽度
var w=window.screen.width;//获取device-width
var targetW=320; //把所有设备的宽度设置为320
var scale=w/targetW; //计算缩放比例
var meta=document.createElement('meta');
meta.name='viewport';
meta.content='user-scalable=no, initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale;
document.head.appendChild(meta);
})()
</script>rem适配(推荐)
通过给根节点设置fontsize，来确定rem的值
html
<script>
(function(){
//rem适配
var html=document.documentElement;//获取html
var hw=html.getBoundingClientRect().width;//获取html的宽
console.log(hw);
html.style.fontSize=hw/20+'px';
// 给html设置fantasize为html宽度/20，说明1rem=1/20页面的宽度，可以根据设计稿确定，好算就行
})()
</script>