HTML5-移动设备兼容页面-移动设备优先原则

考虑到响应式布局和跨平台，空间的高度尽可能不要指定，而是使用内容自动撑开


------------------------------------------------------

兼容移动设备
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>  
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
//不要换行

如果仅仅适配pc端（应该下面一句话就够了）
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>  
    <meta name='viewport' content='width=device-width, initial-scale=1'> 
  

另外注意 《H5-音频播放兼容》

1、兼容的meta头
        http://www.jb51.net/css/93221.html

2、条件注释判断浏览器
        <!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>
        http://blog.csdn.net/vajoy/article/details/8778577

------------------------------------------------------

移动端全屏
<meta name="full-screen" content="yes"/>
苹果：
<meta name="apple-touch-fullscreen" content="YES"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>name="apple-mobile-web-app-status-bar-style" content="black"/>

------------------------------------------------------

统一pc宽度写法width: 80%; min-width: 320px;max-width:960px; 

响应式布局如果直接对pc端和移动写两种样式
通过js判断当前的运行环境最好 《js-判断当前浏览器环境-移动端-PC端-微信》

------------------------------------------------------

指定浏览器标签页显示网站标志图标
<link rel="shortcut icon" href="//tech.jiangjiesheng.cn/favicon.ico" type="image/x-icon" />
<link rel="icon" href="//tech.jiangjiesheng.cn/favicon.ico" type="image/png">

------------------------------------------------------

对于需要通过js代码调整布局的情况说明
在所有的代码js代码引入前增加脚本处理布局，速度要快，避免引入加载js导致调整布局延时。
<script type="text/javascript">
         ;(function _setBottomMenu() {
                   //调整布局逻辑
        })();  //采用立即执行方式
</script>

------------------------------------------------------