移动端入门

移动设备 ：手机 （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