meta设置与去除默认样式--移动端开发整理笔记（一）

视口设置：

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

• 默认不设置viewport一般可视区宽度在移动端是980

• width 可视区的宽度 (number||device-width)

• user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (一般禁止掉)

• initial-scale 初始缩放比例

• minimum-scale 最小缩放比例

• maximum-scale 最大缩放比例

• window.devicePixelRatio（像素比把一个像素 放大至 N个像素去显示）

常用meta设置

<meta name="x5-orientation" content="portrait|landscape /> //QQ强制横屏或竖屏显示
<meta name="x5-fullscreen" content="true" /> //QQ设置全屏
<meta name="screen-orientation" content="portrait"> //UC强制横屏或竖屏显示
<meta name="full-screen" content="yes"> //UC全屏显示
<meta name="format-detection" content="telephone=no, email=no" /> //禁止识别电话号码和邮箱号码


<a href="tel:18888888888">请拨打电话18888888888</a> // 拨打电话
<a href="mailto:motao@motao.com">请发送邮件</a>  //发送邮件

去除默认样式

a,input,button{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}     // 清除点击阴影 

button {-webkit-appearance: none;border-radius: 0;}        //清除按钮圆角 

body {font-family: Helvetica;}   //Web端大多数的字体在移动端没有，可以设置这个字体

body * {-webkit-text-size-adjust: 100%;   //禁止文字缩放
    -webkit-user-select: none; 

}

移动端的其他问题

Font Boosting

在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了

解决办法:

1.设置高度

2.设置最大高度 max-height

rem计算