网站服务部小组文档

移动端页面制作规范

目前移动端页面制作中存在的问题

  • 页面结构不统一，导致全站修改工作量大
  • 对不同分辨率、不同系统，同一系统不同版本的终端兼容性较差，兼容性工作较多
  • 组件不完善，导致开发功能或结构相似的页面时重复工作量较多
  • 新人接手移动端开发时明显bug较多，同样的BUG频繁发生

统一移动端页面制作规范及模板

  • 规范中使用兼容性较好的写法，避免使用兼容性较差的结构及样式
  • 为兼顾不同分辨率的终端，采用效率最高的方案，让响应式开发变得更加简单快捷
  • 同步完善常用组件，减少重复开发
  • 针对官网页面和专题页面提供相似但各具针对性的解决方案

2016-01-06更新

由于新版safari用$(window).width()有时候会取到默认viewport 980的宽度，造成页面元素都放大的情况，所以initScreen中改成用document.documentElement.clientHeight/document.documentElement.clientWidth来取高宽,

    var initScreen=function(callback){//初始化html  font-size
        $("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%")); //单屏全屏布局时使用,短屏下自动缩放
        //$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//长页面时使用,不缩放
        if(callback)callback();
    }

2015-09-21重要更新

删除2015-07-21更新;

移动端设计稿750px*1134px的制作规范修订:


html{ font-size: 312.5%; } 
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; } 
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; } 
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 320%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
   html{ font-size:400%;}
} 
@media screen and (min-width:640px) and (orientation:portrait){
   html{ font-size:533.33%;}
}

例如750px设计稿上320px*200px字体大小为32px的区域样式为：


html{ font-size: 312.5%; } 
.div_ex{
    width:3.2rem;
    height:2rem;
    font-size:0.32rem    
}

同时注意统一加上以下处理：主要处理短屏下缩放，以及初始化时固定页面大小，防止竖屏下弹出键盘或横屏时页面发生缩放的情况


    //function initScreen(){
    //    $("html").css("font-size",$(window).height()/$(window).width()<1.5 ? ($(window).height()/603*312.5+"%") : ($(window).width()/375*312.5+"%"))
    //}
    //2016-01-06将上述方法更新为
    var initScreen=function(callback){//初始化html  font-size
        $("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%")); //单屏全屏布局时使用,短屏下自动缩放
        //$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//长页面时使用,不缩放
        if(callback)callback();
    }


function _onorientationchange(e){
    if(window.orientation==90||window.orientation==-90){
        $("#forhorview").css("display", "-webkit-box");  //显示竖屏浏览提示框
    }else{//竖屏下恢复默认显示效果
        var st=setTimeout(initScreen,300);
         $("#forhorview").css("display", "none");    
    }
    _resize(e);
}
$(function(){
    initScreen();
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",     function(e){_onorientationchange(e);}, false);
})

html示例


<!doctype html>
<html>

    <head>
    <!--#include virtual="/global_include/config.html"-->
        <title><!--#echo var='Title'--></title>
        <meta name="keywords" content="<!--#echo var='Keywords'-->" />
        <meta name="description" content="<!--#echo var='Description'-->" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="format-detection" content="address=no" />
        <!--for baidu 识别移动端页面并禁止百度转码-->
        <meta name="applicable-device"content="mobile"> 
        <meta http-equiv="Cache-Control" content="no-transform" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <!--viewport 设置，如果页面实际情况不允许缩放请加上,user-scalable=no-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta charset="gb2312">
        <link rel="dns-prefetch" href="http://res.nie.netease.com">
        <link rel="stylesheet" type="text/css" href="css/index.less" />
        <!--描述：加载设计样式-->
    </head>
    <body>
        <div id="share_content" style="display:none">
            <div id="share_title">现象级游戏是怎样炼成的</div>
            <div id="share_url">http://game.academy.163.com/open-day/m/</div>
            <img id="share_Pic" src="img/icon.jpg" />
            <div id="share_desc"></div>
        </div>

        <div id="NIE-topshare">
            <!--用于放置顶部分享条，仅在移动端浏览器中显示-->
        </div>

        <div id="forhorview">
            <p>推荐使用竖屏浏览哦~</p>
        </div>
        <div id="main">
            <!--主体-->    
            <div id="content">
                <!--主体内容-->
                <div class="panel active" id="home">
                    <!--界面一-->
                    <div class="NIE-copyRight_m" >
                        <!--底部版本信息-->    
                    </div>
                </div>
                <div class="panel active" id="news">
                    <!--界面二-->    
                </div>
            </div>

            <!--分享提示窗-->
            <div class="share" id="share"> 
                <p>右击右上角按钮分享到朋友圈</p>
            </div>
             <!--信息弹出窗-->
            <div class="alertbox" id="alertbox" style="display: none;">
                <p></p>
            </div>
            <!--内容弹出层-->
            <div class="moudle" id="moudle">

            </div>
        </div>
        <!--此乃底部-->

        <!-- zepto mix NIE (最新版本）-->
        <script charset="gb2312" src="https://nie.res.netease.com/comm/js/zepto(mixNIE).last.js"></script>

        <!--lib中的文件，自动合并为一个文件-->
        <script charset="gb2312" type="text/javascript" src="js/lib/underscore.js"></script>
        <script charset="gb2312" type="text/javascript" src="js/common/common.js"></script>
        <script charset="gb2312" type="text/javascript" src="js/app/index.js"></script>
    </body>
</html>

基础样式


/*reset.less*/
@charset "gb2312";
/* CSS Document */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;  font-size:62.5%;}
ul,li,div,p,body,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none; color: #2a2a2a; }
input{ -webkit-appearance:none;outline:none}
*{outline: none; webkit-focus-ring-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
.hide{display:none;}
body, html {width: 100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;display: -webkit-box;-webkit-box-orient: vertical; -webkit-box-align: center;}

/* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解决某些情况下出现闪屏的问题，若无则不加*/
body{opacity: 1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; }
p,a,li{font-size:1.2rem; color:#434343}
/*common.less 此处仅给出框架样式示例，具体要根据页面类型自行调整框架样式*/
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 70.3%; } 
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 73.24%; } 
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 75%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 78.125%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 80.86%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 84.375%; }
}
/*下面两个是针对android pad分辨率设置的，根据页面类型确定是否在pad中对页面进行放大，需要的话保留下面两个设置，如果不需要，去掉下面两行的设置并把上一行的(max-width:479px)去掉*/
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
   html{ font-size:93.75%;}
} 
@media screen and (min-width:640px) and (orientation:portrait){
   html{ font-size:125%;}
}

#main{
    width:100%; 
    min-height: 100%;
    position: relative; 
    height: 100%;
}
#content{
    position: absolute;
    top:0;
    bottom:0rem;
    left:0;
    right:0;
    width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
 }
.panel{ 
    display: none;
    &.active{ display: block;}
}
#share{
    transition:opacity 0.3s ease-in-out 0s;
    -moz-transition:opacity 0.3s ease-in-out 0s;
    -webkit-transition:opacity 0.3s ease-in-out 0s;
    -o-transition:opacity 0.3s ease-in-out 0s;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,0.6);
    display: none;
    opacity: 0.0;
    z-index: 999;
    text-align: center;
    p{
        font-size:1.4rem;
        color: #fff;
        padding-top:6rem;
        text-align: center;
    }
    &.show{
        opacity: 1.0;
    }
}
.moudle{
    position: relative;
    z-index: 99;
    height:100%;
     transition:opacity 0.3s ease-in-out 0s;
    -moz-transition:opacity 0.3s ease-in-out 0s;
    -webkit-transition:opacity 0.3s ease-in-out 0s;
    -o-transition:opacity 0.3s ease-in-out 0s;
    display: none;
    opacity: 0.0;
    &.show{
        opacity: 1.0;
    }
}

viewport设置

在移动端开发中，我们使用如下viewport设置

<!--viewport的设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

注：device-width实际上并不等于设备宽度，而是css宽度，它是根据设备屏幕宽度和屏幕像素密度换算得出的用于网页显示的css宽度

计量单位的使用

css的计量单位有三种选择：

  • px: 固定的相素值
  • em: 相对父级元素的font-size设置来作为当前元素1em所代表的像素值，如父节点的font-size:10px，当前节点的font-size:1.2em,则当前节点的font-size实为12px;
  • rem：相对根节点html的font-size设置来作为当前元素1rem所代表的像素值，与em的区别就是rem的基本度量单位与父节点无关，只与根节点font-size的设置有关，如设置html{font-size:10px;}后当前dom所有节点的1rem都表示10px;

在移动端开发中我们使用rem作为基本计量单位，同时将根节点默认字号大小设为font-size:62.5%,因移动端浏览器默认字号大小为16px;16*62.5%刚好为10px; 具体设置方法及使用示例

    html{font-size:62.5%;/*刚好为10px;*/}
    #example{font-size:1.2rem}/*设置#example的字体大小为12px;*/
    #example div{font-size:1.4rem; width:10rem;height:10rem}/*设置#example子节点div的字体大小为14px;宽度为100px;高度100px*/

注：安卓下<textarea>标签的内容字体大小不支持rem设置，如有需要使用响应式及px单位设置其字体大小，暂时还未找到具体原因

不同分辨率的终端

在对主流手机终端进行统计得出，大部分手机的device-width为320px、360px、375px、384px、400px、414px，另外安卓pad的device-width为600px\800px，对于ipad我们会在服务器设置ipad访问时以pc端页面浏览，所以移动端页面制作不需要考虑ipad）。 手机屏幕分辨率宽度则在320px-1080px间，有少部分手机已经达到1152px和1440px。

兼容不同分辨率的最优解决方案

设计稿分辨率的选择：

我们目前对设计稿的要求如下：

移动端的设计稿以640x960为基本，同时可以兼容显示屏幕较长的640x1136（iphone5/5S）。 整个页面高度应该适应减去状态顶栏的高度(40px)和浏览器菜单栏的高度(80px),也就是说设计最终必须适应832px和1008px的高度，这点需要在接到设计稿时自行检查，如有疑问，返回给设计师调整。

css基本写法：

移动页面框架宽度采用百分比自适应布局，而高度则是根据320px宽度按比例设置其高度。 使用此种方法会导致设计稿（640px）和css布局参照宽度（320px）不同，这里我们要针对图片做个处理：

  • DOM文档中使用标签插入的图片分辨率以640px为标准，将图片放到一个div节点中，通过设置div的实际宽高及img的样式width:100%;height:100%来实现图片的自动缩放。
  • css背景图片则使用backgroud-size:100% 100%来实现缩放。

例如： 某个元素在640分辨率的设计稿上尺寸为320x400,则在320分辨率的页面上的尺寸应为160*200

    <div id="box"><!--160*200-->
        <ul>
            <li>文字文字文字</li>
            <li>文字文字文字</li>
            <li>文字文字文字</li>
        </ul>
    </div>

对应的css为 

    html{font-size:62.5%;width:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
    body{width:100%;}
    #box{width:50%; height:20rem}/*宽度160px/320px=50%,高度*/

对于图片元素的兼容性处理

如果#box里的是图片，在css宽度为360、384等css宽度的设备上浏览，则图片会拉伸变形。 这种情况在移动官网上主要表现在banner区域，在以图片为主要传播元素的专题上则表现在所有的图片元素上。

1.官网banner的兼容性处理

有两种情况：

  • 一种是营销类Banner，其构成是图片加文字的设计图,如:

Alt text

  • 另一种情况则是纯图片，常见于相册、图库、新闻图片等

Alt text

游戏网页中常见于第一种情况，处理方式:

  • 将#banner的宽度固定为 32rem;使用js动态按图片比例根据实际css宽度动态修改banner区域的高度， 这里还涉及到横屏的处理，横屏下我们选择的方案是不改变banner的尺寸，仍以32rem*10.6rem的尺寸显示并左右居中。 如：
<div id="banner"><!--320*106-->
    <img src="images/img.jpg" /><!--图片实际尺寸640*210-->
</div>

#banner{width:32rem;height:10.6rem; margin:0 auto;}
#banner img{width:100%; height:100%; margin:0 auto;}


$(function(){
    if(window.orientation==180||window.orientation==0){ //判断手机为竖屏时

       $("#banner").css({
        "width":"100%",
        "height":($(window).width()*106/320)+"px"
    })

   }

})

第二情况常见于新闻类页面或图库类，但是在我们的实际项目中并不常见， 解决文案是将#banner设为width:100%:height:10.6rem;overflow:hidden，img设为width:100%; height:auto，这样导致的结果就是在device-width为360\384等非320的终端中显示时会截取上面的部分显示，超出高度的图片区域被隐藏。 当然你也可以选择按第一种情况进行处理。

2.专题页面中图片的兼容性处理

专题页面中每一个图片类元素分别放到一个div中，设置固定的width和height,并将图片设置为width:100%;height:100%进行自动缩放。

<div id="animate"><!--100*80-->
    <img src="images/img.jpg" /><!--图片实际尺寸200*160-->
</div>

#animate{width:32rem;height:10.6rem; }
#animate img{width:100%; height:100%}

其中背景图的处理根据实际情况使用backgrund-size:100% 100%;或者background-size:100% auto;来自动铺满。

  • backgrund-size:100% 100%:全屏铺满，背景图会拉伸变形，适用于背景图拉伸变形不显示效果的专题。
  • backgrund-size:100% auto:横向铺满，背景图不会拉伸变形，但超出屏幕高度的部分会被隐藏，适用于背景图被截取掉下面一部分也不影响效果的专题。注意若屏幕高度比图片还高，则会显示空白，所以使用这种方式必须要求设计师提供一张足够长的背景图！
<div id="bg"><!--100*80-->
    <img src="images/img.jpg" /><!--图片实际尺寸200*160-->
</div>

#bg{
    width:100%;
    height:100%; 
    background:url(../img/bg.png) 0 0 no-repeat;
    background-size:100% 100%;/*背景全屏铺满*/
    background-size:100% auto/*背景横向铺满*/    
}

对于视觉传播类（即以图案为主要传播元素）的专题，考虑到专题页面生命周期较短以及工作量的问题，横屏下我们采用提示用户使用竖屏浏览的方案，不做显示兼容。

function _onorientationchange(e){

        if(window.orientation==90||window.orientation==-90){

                $("#forhorview").css("display", "-webkit-box");  //显示竖屏浏览提示框
                $("html").css("font-size",62.5*$(window).height()*2/3/320+"%");//横屏下将整个页面缩小;
                $("#content").css({"height":$(window).height(),"width":$(window).height()*2/3,"margin":"auto"});//横屏下将整个页面以宽高比2：3在横屏中居中显示;

            } 
            else{//竖屏下恢复默认显示效果
                $("#content").css({"width":"auto","margin":"auto","height":"100%"});
                $("html").removeAttr("style");
                $("#forhorview").css("display", "none");    
        }
        _resize(e);
    }

        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function(e){

            _onorientationchange(e);
        }, false);

视觉传播类专题的使用绝对定位的兼容性问题

此类专题我们需要使用绝对定位设置元素坐标，通过改变位移、缩放、透明度等来实现动画效果。 在使用相对定位（position:relative或absolute）设置动画元素的坐标时直接使用rem来定位，其结果是对不同屏幕比例的终端来说显示效果差异较大。 有一点原则：如非必要尽量少使用absolute。 我们采取的解决文案是：

  • 动画元素设置固定的宽高，使用margin-top:-height/2;margin-left:-width/2设置其定位参照点为该动画元素的中心点
  • 通过百分比设置动画元素的left或right和top或bottom,`注意这里的left\right\top\bottom的计算标准是动画元素中心点的横竖坐标。

使用这种方式，在不同屏幕高度的终端中，各个动画元素之间的上下左右间距会自动调整，而不会在屏幕较长的设备上固定的挤在最上方，在较宽屏幕上固定挤在左方或右方。

<html>
    <body>
        <div id="animate"><!--100*80-->
            <img src="images/img.jpg" /><!--图片实际尺寸200*160-->
        </div>
    </body>
<html>

html,body{ width:100%; height:100%;}
#animate{
    width:10rem;
    height:8rem; 
    position:absolute; 
    margin-left:-5rem;
    margin-top:-5rem;
    left:20%; /*设计稿中动画元素中心点横坐标除以总页面宽度后得到的百分比*/
    top:30%;  /*设计稿中动画元素中心点横坐标除以总页面高度后得到的百分比*/
}
#animate img{width:100%; height:100%}

响应式的使用

对于官网使用device-width+百分比自适应进行布局后,对于各种device-width尺寸均好良好的显示效果 但是对于专题来说，即使使用这种布局，在device-width=320/360/375/384/400/414这几种终端设备中显示兼容效果是比较好的，但是对于device-width=600/800的安卓pad来说，各个动画元素会变得十分很小，这时若无专为pad版做设计，则可以考虑采用响应式将整个页面的布局同比放大。 在工作量与显示效果间取个平衡点，初步确定五个响应点：

  • 320-479（手机竖屏的device-width基本都在这个范围内，可细分为三个响应点：320-359、360-399、400-479）
  • 480-639（小尺寸安卓pad的device-width普遍为600左右,页面同比放大1.5倍）
  • 640+（大尺寸安卓pad的device-width普遍为800左右，页面同比放大2倍）

具体做法，在专题页面加上以下代码


 html{font-size:62.5%;/*刚好为10px;*/}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 70.3%; } 
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 73.24%; } 
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 75%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 78.125%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 80.86%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 84.375%; }
}
/*下面两个是针对android pad分辨率设置的，根据页面类型确定是否在pad中对页面进行放大，需要的话保留下面两个设置，如果不需要，去掉下面两行的设置并把上一行的(max-width:479px)去掉*/
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
   html{ font-size:93.75%;}
} 
@media screen and (min-width:640px) and (orientation:portrait){
   html{ font-size:125%;}
}

使用固定顶部的网页结构规范

由于我们在所有的官网统一添加了上下滑动自动隐藏显示的分享条，在没有固定顶栏的页面上，可以正常地交互，但是在固定顶栏的页面上，由于大多使用了position:fixed样式去固定顶栏（有些还有固定菜单弹出）的位置，新添加的头部分享条会导致这些fixed的顶栏和菜单错位的情况。在尝试过几种方案之后，确定使用以下方案，以拥有更好的兼容性和用户体验。

  • 非必要情况下，禁止使用position:fixed做相对浏览器定位
  • html\body宽高设为100%, header高度44rem, content采用绝对定位，并将left right bottom设为0,同时top为44rem,并加上overflow-y: scroll;overflow-x: hidden;同时启用div惯性滚动特性-webkit-overflow-scrolling: touch 注：-webkit-overflow-scrolling这个属性只支持android 4.0 和ios 5以上的系统，在android 4.0+ 的安卓手机已经占全部安卓市场80%以上的份额，我们可以忽略在低版本安卓系统上滚动不流畅的问题，如果切实有需要实现，也可以通过第三方js组件如（iscroll,kissy-mscroller）模拟惯性滚动来对低版本安卓做兼容。
  • 其他需要相对浏览器定位的元素均可position:absolute来定位，因页面高度总不超出一屏，所以一样可以实现fixed效果。
  • 在有固定顶栏的官网中，引用分享组件之后还需要调用一次FixShareTopbar（具体会在移动端分享组件的文档中说明）。

基本代码如下：

<html>
<body>
        <div id="NIE-topshare"><!--用于放置顶部分享条，仅在移动端浏览器中显示--></div>
        <div id="main"><!--主体-->
            <header id="header" ><!--顶部菜单栏-->
                <a href="javascript:void(0)"  id="btn_menu"  class="flt  btn_nav"  data-view="mask"><span  class="s_normal"><i class="icon i_menu"></i>菜单</span></a> 
                <h1><a href="javascript:void(0)" panel="home" active="changepanel" class="logo"></a></h1>
                <a href="javascript:void(0)"   id="btn_reg" class="flr btn_nav" data-view="mask"><span class="s_normal"><i class="icon i_edit"></i>注册</span></a>
            </header>

            <div id="content"><!--内容-->
            </div>
        </div>
        <nav id="nav_menu"><!--注意菜单、弹窗等需要fixed的元素放到main外-->
            <div class="arrow"></div>
            <ul>
                <li><a href="javascript:void(0)" panel="home" active="changepanel"><i class="icon i_news"> </i>首页</a></li>
                <li><a href="javascript:void(0)" panel="news" active="changepanel"><i class="icon i_news"> </i>新闻活动</a></li>

                <li><a href="javascript:void(0)" panel="specile" active="changepanel"><i class="icon i_specile"></i>游戏特色</a></li>
                <!--<li><a href=""><i class="icon i_bbs"></i>论坛入口</a></li>-->
            </ul>

        </nav>
</body>
</html>

    body, html {
        width: 100%;
        height:100%;
        display: -webkit-box;
        -webkit-box-orient: vertical; 
        -webkit-box-align: center;
    }
    header{
        height:4.4rem; 
        overflow: hidden;
        width:100%;
    }
    #content{
        position: absolute;
        top:4.4rem;
        bottom:0rem;
        left:0;
        right:0;
        overflow-x:hidden;
        overflow-y:scroll;
        -webkit-overflow-scrolling: touch;
     }
     nav{ 
        width:100%;
        display: none;
        position: absolute;
        top:4.4rem;
        bottom:0;
        left:0;
        right:0;
        z-index:11;
    }

在移动端使用新的css3样式代替原来在PC上的开发习惯

  • 新的布局实现方式:使用display:box、box-flex代替float\display：inline-block; 实现更强大、更完美的流体布局，尤其在宽度为100%的布局中，实现横向并排元素宽度的自动伸缩以及水平垂直居中平均分布、首尾分布排列等。
  • 垂直居中的实现方式：使用display:-webkit-box;-webkit-box-align: center;实现垂直居中。
  • 尽量使用border-radius，box-shadow,text-shadow等css3样式实现诸如圆角、渐变色、盒子投影、字体投影,减少使用图片。
  • 对于单色的icon图标，我们将会整理出一套常用图标，并制作成字体，利用css3的@font-face使用自定义字体导入，这样的话，可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果（如投影）等，而不再需要每一种颜色就需要切一份图片。
  • 利用-webkit-transform:rotate(90deg)来获取旋转了不同角度的icon，避免每个角度需要切一张图片
  • 在动画中，利用css3动画属性如-webkit-transform:translate(10px,12px)来改变元素的偏移位置，减少使用left和top来做位移动画

在移动端开发需要注意的一些开发细节

  • 如非必要，禁止使用gif动画！在必须使用的情况下，一定要动态加载需要显示的gif动画，同时动态删除隐藏的gif动画。
  • 避免使用display:inline-block, 做横向或纵向流式布局，因为使用此属性元素间有默认间隙，要fix比较麻烦，而且在低版本andorid上可能会有问题
  • 避免使用calc样式
  • 避免使用fixed样式
  • 尽量优化图片素材和脚本的大小，注意移动端流量及网速问题
  • 多图页面或者多模块要注意做延迟加载，特别是非第一屏需要展示的图片或调用的脚本，必须做延迟加载(滚动或者切屏时才触发加载)
  • 图库一类的大图预览页面必须做预加载
  • 若专题动画使用了大量的大图素材，必须做预加载条，先加载图片资源再进行动画脚本运行，避免动画脚本运行完才出现图片，对首次打开页面的用户根本看不到动画过程！削弱了传播效果！
  • 翻页避免使用像pc端的按钮切换页面，而且使用滚动到底部，显示加载更多内容按钮，用户点击后实现增量加载。

具体案例

可参考项目：

1.大话3移动官网：http://xy3.163.com

其应用了以下规范内容： 有固定顶条的官网示例，及游戏特色栏目为视觉传播系专题示例

  • viewport设置
  • 计量单位使用rem
  • 设计稿分辨率为640px
  • 页面基本框架的设置
  • 对于图片元素的兼容性处理
      2.专题页面中图片的兼容性处理(游戏特色栏目)
  • 视觉传播类专题的使用绝对定位的兼容性问题
  • 使用固定顶部的网页结构规范

２.塔防骑士团移动官网：http://too.163.com

无固定顶条的官网示例

写在最后

接下来，我们会根据这份规范文档制作官网模板和不同主题的专题模板，同时集成一些常规处理。方便大家更快地使用新规范开发，同时提高开发效率。 同时，在使用此规范开发的新项目中，我们会挑选具代表性的项目补充在此文档中。

新规范的贯彻及完善需要大家在开发中自觉应用，并不断对出现的问题进行补充。