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

视口设置：

• 默认不设置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强制横屏或竖屏显示
//QQ设置全屏
//UC强制横屏或竖屏显示
//UC全屏显示
//禁止识别电话号码和邮箱号码

请拨打电话18888888888 // 拨打电话
请发送邮件 //发送邮件

去除默认样式

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计算

Less： Koala