视口设置:
<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计算