• 保存到桌面  加入收藏  设为首页
HTML5

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

时间:2017-09-19 17:18:26   作者:江节胜   来源:胜行天下   阅读:535   评论:0
考虑到响应式布局和跨平台,空间的高度尽可能不要指定,而是使用内容自动撑开


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

兼容移动设备
    <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>

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

有任何疑问或技术合作都可联系我

微信:767000122 【推荐】

QQ:596957738


相关评论

加我微信 596957738 (QQ同号)加我微信   QQ联系:596957738   地址:江苏省南京市雨花台区

苏公网安备32011402010305号

皖ICP备16019989号

江节胜的Gitee,江节胜的Git地址