今天总结一下在写手机移动端页面时的一些注意事项。在写手机移动端页面时，我们有时候会稀里糊涂的遇到一些坑。同时手机页面的一些展示和我们pc端页面的展示是有一些区别的。
一、书写移动端时需注意的meta 标签
1. 第一个标签（最重要的标签）
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">width=（number || device-width） -设置文档的宽度，device-width表示文档宽度等于设备宽度，在安卓下对number 值得设置支持不是太好
initial-scale：（） - 初始的缩放比例
minimum-scale：（） - 允许用户缩放到的最小比例
maximum-scale：（） - 允许用户缩放到的最大比例
user-scalable：（yes || no） - 用户是否可以手动缩放 ios10 无效
2.去掉手机数字和邮箱的识别功能
<meta name="format-detection" content="telephone=no,email=no">如果你想想让用户拨打电话或发送邮箱可以这样做：
<a href="tel:13288888888">13288888888</a>
<a href="email:13288888888@163.com">13288888888@163.com</a>3.QQ强制竖屏或横屏显示（x5内核浏览器中有效）
<meta name="x5-orientation" content="portrait || landscape">x5内核的浏览器：QQ浏览器，微信和qq内置浏览器
4.QQ设置全屏显示
<meta name="x5-fullscreen" content="true">5.UC强制竖屏或横屏显示
<meta name="screen-orientation" content="portrait || landscape">6.UC全屏显示
<meta name="full-screen" content="yes">二、书写移动端时需注意的css 样式
1.清除（设置）点击a标签时的高亮颜色
-webkit-tap-highlight-color:颜色手机端我们用a 标签包裹的内容，默认点击时有高亮颜色
2.消除按钮圆角
-webkit-appearance：none;清除手机端按钮默认的圆角。清除后还是有些圆角样式，我们可以在加border-radious:0; 可以彻底清除
3.选中文字设置(部分手机上有效果，安卓手机似乎有问题)
-webkit-user-select：none;去除掉长按文字时选中文字的样式。
4.禁止文字缩放
-webkit-text-size-adjust：100%；在手机横竖屏时，用于禁止文字缩放，用处也不是很大
三、书写移动端时的一些坑
1.Font Boosting 问题
在一段文字我们没有给他设置高度的时候，在webkit 内核下，文字的大小被浏览器放大了。
解决方法：
①设置高度
②设置最大高度（max-height）
2.Fiexd 问题
在手机端支持不是太好，有时候，将头部固定到最上边，滚动页面时，可能会出现抖动现象。尽量不要使用。
3.IOS的body的overflow 问题
在ios 下如果给body一个overflow：hidden 页面不起作用，并没有将元素超出的部分隐藏。
解决方法:
在最外层包裹一个div，将overflow：hidden 设置在这个div上。