无线页面制作注意事项！

一、head meta 引入内容

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection" />

 

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

第四个meta标签表示：去除Android平台中对邮箱地址的识别

 二、CSS 宽度控制 rem vw px

html,body{
   font-size:2.15vw  
}

div{
   width:10rem;  
}

px 固定像素

VW 为浏览器窗口百分比 1VW = 1% * 当前的窗口宽度；

VH 为浏览器窗口百分比 1VH = 1% * 当前的窗口高度；

rem 为 根目录下 font-size 的宽度  

如：html,body{font-size:10px;}

　　div{width:2rem;}  div 的宽度为20像素

常见设置：

　　根目录下的font-size 一般为设置 vw =（ 10px / 浏览器宽度 px）* 100

　　取值，10像素 占 浏览器宽度的百分之几  10px = 多少 vw；

　　vw的值：2.415vw = 10像素 / 浏览器宽度（默认iPhone：414px） 

　　vw的值  1.5625vw = 10像素 / 浏览器宽度（移动端常见宽度：640px）