一、我们现在使用的移动设备

1.移动设备：手机、ipad

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

2.设备系统：安卓、iOS

3.设备内置浏览器：安卓--谷歌、iOS--Safari

   二者的内核都是webkit，所以我们做开发时不需要考虑兼容性，只考虑安卓和iOS的区别

二、布局

1.什么是设备宽：设备的实际大小，厂家定制大小

2.页面大小：设计稿上的设计页面大小

3.浏览器视口：默认是980px

我们要做的，就是当三者不统一时，找到统一的办法

怎样使设备宽与浏览器视口一样：在head标签中加一个mete标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

设备宽和视口一致时，如果页面宽大于这个数字会出现滚动条

但是如果用我们以前用的传统布局，就会截掉超过的部分

所以我们需要了解几种布局方式

 

。。。。待续

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄