移动端开发环境

Emulation 模拟器

真机测试 wamp

一：Device 设备设置
1. model 模型选择
2. resolution 分辨率设置
3. Device pixel ratio 像素比设置
4. *Emulate mobile 模拟移动端特性
5. *Enable text autosizing 自动缩放字体
6. *Shrink to fit 缩放以适应屏幕
二：Media 媒体查询
三：Network 浏览器信息
四：Sensors 传感器
1. Emulate touch screen 模拟移动端触摸事件
--touch-events
2. Device Geolocation Overrides 重置地理信息
3. Accelerometer 模拟陀螺仪
α 围绕这Z轴的旋转
β 围绕这X轴的旋转
γ 围绕这Y轴的旋转

<meta name="viewport" content="" /> 视口（浏览器窗口）
1.width [pixel_value | device-width （手机默认宽度，物理分辨率）]
2.user-scalable 是否允许缩放 （no||yes）
3.initial-scale 初始比例
4.minimum-scale 允许缩放的最小比例
5.maximum-scale 允许缩放的最大比例
6.target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 像素点

页面设置
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />视口的设置
<meta name="format-detection" content="telephone=no, address=no, email=no"> 禁止拨打电话、地址、邮箱
<meta name="apple-mobile-web-app-capable" content="yes"> 苹果自动生成到桌面
<meta name="apple-mobile-web-app-status-bar-style" content="black">滚动条颜色设置

 

布局设置

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

html{height:100%;overflow:hidden;}
body{height:100%;overflow:auto;margin:0;}

<script>
/*   document.documentElement.getBoundingClientRect().width      取设备宽度*/
var iWidth=document.documentElement.getBoundingClientRect().width;
iWidth=iWidth>540?540:iWidth;
document.body.style.fontSize=iWidth/10+"px";
</script>