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

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

7.WebApp全屏模式：伪装app，离线应用。

启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

需要注意的是：以上我测试，目前只在safir浏览器下有效，并且要先添加该网页为书签到桌面，在点击访问时生效。

二、书写移动端时需注意的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上。

四、移动端的适配

1.百分比适配

这个方法我不在多讲，我门都知道，将元素宽度设置成百分比，页面可以根据屏幕尺寸的变化而变化。但是这里有一个问题是，我们的宽度可以自适应，但是高度并没有随着手机屏像素的变化而变化。

2.viewport适配（目前我在X5内核的手机浏览器上测试有问题）

第二种方法是利用viewport 来 将屏幕窗口宽度设置成一致的。这里我们可以动态添加<meta> 标签来设置。
注意：上边我们已经说了width=（number || device-width）因为在安卓下部分机型会有问题，所以我们这里不能动态控制它，我们而是动态的控制屏幕的缩放。

var width = window.screen.width; // 获取屏幕宽度
       var targetW  = 320; // 定义y我们想要设置的宽度
       var scale = width/targetW; // 计算我们要缩放的比例

       //创建动态 <meta>标签
       var meta = document.createElement('meta');
       meta.name = 'viewport';
       meta.content = "user-scalable=no,initial-scale=" 
                       + scale 
                       + ",minimum-scale=" 
                       + scale 
                       + ",maximum-scale="
                       + scale ;

        document.head.insertBefore(meta,document.head.firstChild);

这时我们要将四个div并排一列，我们可以不用使用百分比平分，我们可以直接书写px 值。这时我们如果实现四个div并排排列，我们直接计算，320px 等分四份，给每个div设置80px即可。

HMTL:

   <div class="warp">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>

CSS:

    body{margin:0;font-family: Helvetica;}
     .warp{
         width:100%;
     }
     .warp div{
        float: left;
        width:80px;
        height:100px;
     }
     .warp div:nth-of-type(1){
         background:red;
     }
     .warp div:nth-of-type(2){;
        background:blue;
     }
     .warp div:nth-of-type(3){
        background:yellow;
     }
     .warp div:nth-of-type(4){
         background:green;
     }

其他知识点： 手机上有一个像素比 devicePixelRatio 这个像素比是因为手机像素目前已经很高了，相对于pc端，手机尺寸是很小的，的是像素取并没有效太多，在一个小尺寸上显示很多像素，就会出现一个元素在电脑端显示正常，到手机上显示会很小。为了让其在手机上显示的比较正常，手机会有一个像素比，将元素的每一个像素按像素比去放大。

window.devicePixelRatio // 只读

每一个手机的像素比并不是都相同的。

3.使用rem去做适配
这里你应该需要了解rem做单位和em作单位的区别。如果你还不知道，可以去看看我以前的文章：http://blog.csdn.net/webxiaoma/article/details/53431457

使用rem做适配，来实现上面的效果，我们可以动态的设置根元素的字体大小。
下面我来具体说一下：
①首先，比如我们拿到一个移动端设计稿。设计稿的宽时 750px
②我们将移动端屏幕宽等分成15份，作为根节点字体；每一份其1rem,整屏也就是15rem

var width = window.screen.width; //获取移动端屏幕宽度
document.documentElement.style.fontSize = width/15 + "px"

③要想将750px设计稿完全展示在移动端屏幕上，那么750px 的设计稿也分成了15份，没份是50px, 对应的一个50px 就是一份，也就是 1rem，

④如果我们在设计稿上量的100px，那它换算成rem 就是 100除以50,也就是 2rem

⑤也就是每次我们从设计稿上量的像素除以50就是应写的rem；

如果上面的例子你看懂了，你可能会说，每次我们量出像素后，都要去就算会很麻烦。这里我推荐使用less 或 sass。
比如使用less:

@w:50rem;

.div{
   width:750/@w;
   height:100/@w;
}