移动设备 ：手机 （Mobile phone） 平板（ipad）
移动设备系统：Android(安卓)、ios（苹果）
内置浏览器： 安卓内置chrome（谷歌）浏览器 ，苹果内置safari浏览器，但他们两个的内核都是 webkit，因此无需考虑浏览器兼容性，但需要考虑安卓(Android)和ios的区别
Android(安卓)、ios（苹果）在页面布局上需要考虑的因素：
1.设备宽度（设备的实际大小或者说是设备 的分辨率）
2.页面大小 开发者设计的大小
3.浏览器的视口 浏览器窗口大小，可以用document.documentElement.clientWidth查看，在移动设备初始视口一般默认为980
例如： 假若使用的是苹果5，分辨率为320*568，而设计的页面是1200px，浏览器的视口默认为980，浏览器的视口会自动缩小，以100%完整展示页面，就会变的不清楚，特别挤。我们需要把这三个变的统一
方式：
1.使移动设备(320)和浏览器视口(980)宽一致
在head之间加一个meta标签name="viewport"
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉。不能使用传统的页面开发模式了
来源：https://www.cnblogs.com/Shinigami/p/10827729.html