移动端开发~视口viewport 、meta常用设置、常见问题box-sizing（一）

viewport 视口 (可视区视口)；

视口（viewport）是用户网页的可视区域，也可称之为视区。

默认不设置 viewport 可视区窗口的宽度在移动端的时候是980； 

meta标签的设置   设置视口viewport

属性	属性值
width	可视区的宽度(number || device-width)
user-scalable	是否允许用户缩放( yes/no )
initial-scale	初始缩放比例,通过扩大或者缩小视觉视口的宽度实现
maximum-scale	最大缩放比例
minimun-scale	最小缩放比例

devicePixelRatio  设备像素比 =  物理像素（分辨率） /  css像素 ；
表示把一个像素放大至N个像素去显示 (N表示为DPR)
例如：

css像素宽为375px的，那么设计图至少是750px的物理像素
现在 iphone 5 为 320px，那么设计图就要至少640px了
但是目前iphone5 很少用了，基本都是375px以上了，所以设计稿物理像素至少750px以上。

---

meta 常用设置

x5内核浏览器  可以控制横竖屏的显示；
QQ强制竖屏或者横屏 

portrait||landscape   强制竖屏||强制横屏

QQ强制全屏 

UC强制竖屏

UC强制全屏

禁止拨号以及邮箱，忽略自动识别数字为电话号码 ：

 如果要拨号的话，另外加个a标签， 如同下面：

 13888888888
如果tel:110时，则会自动拨打110.所以前后要一致；
语法表示 tel:电话号码 

 如果要发送邮箱的话，加个a标签， 如同下面：

 请发送邮件
语法表示 mailto:目标地址

---

移动端开发时的一些问题：

1、 有一个字体设置专门是规范英文字体的，如下：

 body{
       font-family:helvetica;
     }
中文字体该是怎样就怎样。

2、a标签、input标签 消除 高亮显示：点击之后出现一个默认的阴影(正方形的)  ，如下：

 a,input{
          -webkit-tap-highlight-color:transparent;/*或者是  rgba(0,0,0,0)*/
        }

点击时会有个默认阴影
永不放弃

3、标签 input  在 移动端，如下：

正常情况下是正方形的；但是在 ios下显示效果为圆角；那怎么去除圆角呢？去掉 ios 中 html 的 input 元素显示圆角问题如下：

input,button{
             -webkit-appearance:none;
            border-radius:0;
            }

---

怪异盒模型 box-sizing:border-box ;

    
1
    
2
    
3
    
4

---

rem:表示设置html根元素的字体大小；

html {
  font-size: 16px;
}
/* html根元素的字体大小是16px，
 * 那么 1rem = 1* 16px  = 16px
 *      2rem = 2 * 16px = 32px 
*/