书写手机移动页面时的一些坑

今天总结一下在写手机移动端页面时的一些注意事项。在写手机移动端页面时，我们有时候会稀里糊涂的遇到一些坑。同时手机页面的一些展示和我们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:[email protected]">[email protected]</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上。