移动端二三事【一】：移动端页面重构基础工作与注意事项。

现在的前端工作中，移动端的地位甚至已经超过了PC端，也趁着有时间，来全面总结一下移动端页面重构的注意事项和一些小技巧。

话不多说，首先项目开始前，首先要进行整体规划和准备工作。

一.整体规划与准备

1.项目构建目录

前端项目如火如荼的发展着，项目开发之初的准备工作也越来越复杂，IT项目的发展都是为了更高效的开发，也就是易用性、高扩展性、高维护性三个方面。构建目录时应就具体情况进行分析，不外乎以下几点：

（1）生产环境与发布环境目录（是否使用打包工具、编译器等，例如webpack、less、sass、postCSS、babel，项目测试无误后输出发布发布环境。）

（2）构建工具目录（gulp、grunt、webpack）

（3）模块加载器目录（require、sea、webpack）

（4）测试环境目录

（5）真机调试（在此注意，浏览器端预览是基于像素比和视口，对移动端设备大小进行的模拟，无法完全模拟移动端设备。）

若不使用额外工具，此项可以忽略。之前常用gulp的browser-sync，会在gulp的构建目录中存在。

（6）主文件目录（大学时刚接触前端可能就这一个目录，在此用于自嘲 ^_^）

包括css目录、js目录、图片、字体等。小项目中，第（3）条的加载器也可包含在此，此目录具有灵活性。

（7）模板与路由等逻辑层目录等（注意：此处针对于使用node.js为后端语言的前端开发者，若后端语言为php、java等可不作考虑）

node.js是趋势，模板目录以express+ejs为例（鄙人只用过express），一般将ejs文件放于一个目录之下，而路由文件放于route目录之下，主文件（app.js）经路由分发后再route下拿到具体的逻辑文件进行执行，然后返回给浏览器端进行渲染（大多后端语言的模板都是如此）

2.选择合适的技术栈

在此不作过多解释，基于尽可能高的开发与执行效率，根据公司要求或个人喜好进行选择。

3.页面单位选型与布局

单位的选型直接关系到页面呈现的效果，根据我的经验有以下几种选择：

（1）简单粗暴的完全使用媒体查询

简单粗暴但确实是想要什么效果就有什么效果，只要你不嫌麻烦。在追求高效开发的前端行业，这项选择可以抹去。

（2）纯纯的使用em

个人更喜欢在响应式的时候使用em在根节点用于区分PC端和移动端的基础字体大小。不过，在纯移动端也不乏为一种不错的解决方案。但是，因为em在计算字体大小时是相对于父节点的字体大小计算的，所以要处理好父节点的fontsize大小就显得尤为重要，而一旦处理不好就会有牵一发而动全身的赶脚。纯纯的使用em，个人不是很建议，因为一个节点使用em不但取决于父节点，更影响着子节点。独立操作的空间稍显不足。

（3）纯纯的使用rem

*使用js设置rem

(function(){
    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
     html.style.fontSize = hWidth/15 + "px";
})()

*也可使用媒体查询设置根节点字体大小

但从想法上看，完全的流体布局，是最佳解决方案，但存在兼容性问题，如Chrome的最小字体为12px，但其他多数浏览器最小字体可在12像素下。真机调试时你就会发现，12像素是正常用户可容忍的最小字体，但使用rem稍有不慎就会使字体小于12像素，因此，此选择要求开发者时刻谨记最小字体的临界大小。

（4）VW、VH（这里的V指viewport）

VW：视口宽度的百分比。如1VW为视口宽度的1%，VH同理；vmin视口宽度和视口高度中得最小值，vmax同理；

使用视口单位是真正意义上实现流体布局的选择，因为它除了基于视口大小外不受任何其他因素影响。个人很看好视口单位的后续发展，毕竟是直截了当的根据响应式设计的。但由于种种原因，目前使用还不是很广泛，但在局部布局或解决具体问题时时往往会起到点睛的效果。

（5）viewport缩放适配

固定页面大小，根据设备大小进行缩放适配

(function(){
    var w = window.screen.width;
    var targetW = 320;
    var scale = w/targetW; //当前尺寸/目标尺寸
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
    document.head.appendChild(meta);
})();

（6）em+媒体查询

建议使用，常规单位操作使用em，具体操作使用媒体查询。

（7）rem+媒体查询

建议使用，常规流体布局操作使用rem，具体操作（如最大最小字体等）使用媒体查询。

搭配使用是最佳选择，特殊项目还需要具体分析，以上分析与建议建立在常规的纯移动端项目中。

 二，页面的基础设置：

1.常用meta元标签设置

<!--H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--网站开启对web app程序的支持-->    
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->    
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--禁用掉uc浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验。-->    
<meta name="wap-font-scale" content="no">
<!--忽略将页面中的数字识别为电话号码-->    
<meta name="format-detection" content="telephone=no" />
<!--忽略Android平台中对邮箱地址的识别-->    
<meta name="format-detection" content="email=no" />
<!-- QQ强制横屏或竖屏显示 -->
<meta name="x5-orientation" content="portrait|landscape"/>
<!-- QQ设置全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- UC强制竖屏或横屏显示 -->
<meta name="screen-orientation" content="portrait">
<!-- UC全屏显示 -->
<meta name="full-screen" content="yes">
<!-- 禁止电话号码和邮箱识别 -->
<meta name="format-detection" content="telephone=no, email=no" />

普通移动端的头部：

    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <!--H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!--在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
    <meta name="wap-font-scale" content="no">
    <!--禁用掉uc浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验。-->
    <meta name="format-detection" content="telephone=no" />
    <!--忽略将页面中的数字识别为电话号码-->
    <meta name="format-detection" content="email=no" />
    <!--忽略Android平台中对邮箱地址的识别-->
    <title>XXXX</title>
    <link rel="icon"  href="images/favor.png">

 

2.特殊css重置样式

body * {
    -webkit-text-size-adjust: 100%;  /*取消横竖屏的字体缩放*/
    -webkit-user-select: none; /*ios取消文字选中*/
}
a, 
input, 
button{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  /*取消标签选择高亮*/
}
input, 
button {
    /*ios取消圆角*/
    -webkit-appearance: none;   
    border-radius: 0;
}

3.清楚font bosting设置

webkit内核浏览器在智能判断段落标签字体可能会使用户看不清楚时，会将字体智能放大。

解决方法：为包含段落内容的标签添加max-height。