前端移动端适配问题

一、一些概念
1、移动端适配
概念：针对不同移动端设备的页面实现自适应或者保持统一效果的等比缩放（看起来差不多）

2、viewport视口
visual viewport:可见视口(window.innerWidth\innerHeight)
layout viewport：布局视口（dom宽度 doucument.documentElement.clientWidth\clientHeight）
idea viewport：理想视口（visual=layout*scale），就是完美适配，不需要用户缩放或者使用滚动条就能正常查看网站内容；显示的文字大小无论在何种密度密度屏幕或者分辨率下显示的都差不多。

3、meta viewport标签的六个属性（content中的内容）
width:layout viewport的宽度，值为正整数或者字符串"width-device";
initial-scale:页面初始缩放值（数字可以是小数）
minimum-scale、maxmum-scale:允许用户缩放最小、大值
height: layout viewport的高度
user-scalable:是否允许用户进行缩放（yes\no）
设置理想视口：将默认的layout viewport的宽度设置为移动设备的屏幕宽度<meta name="viewport" content="width=device-width ini