H5开发小技巧一、文档head模板构建

最新推荐文章于 2022-09-29 19:20:34 发布

super石头

最新推荐文章于 2022-09-29 19:20:34 发布

阅读量1.4k

点赞数

分类专栏：移动应用文章标签： H5-适配

本文链接：https://blog.csdn.net/mn120986/article/details/46974065

版权

移动应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta content="telephone=no" name="format-detection" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-  scale=1.0, maximum-scale=1.0,user-scalable=no"/>
</head>

DOCTYPE声明：采用HTML5的声明格式，不需要声明引用DTD
这里写图片描述
telephone=no 禁止把页面中的数字转化为拨号链接。
viewport 设置页面viewport宽度=设备宽度，缩放值为1，最大最小缩放值均为1（多重设置是为了兼容各种设备）。
viewport标签共有以下值：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例，值的范围为0.25至10.0之间
minimum-scale：允许用户缩放到的最小比例，值的范围为0.25至10.0之间
user-scalable：用户是否可以手动缩放
2.适配规则
移动端网页适配有多种方案：定宽布局，响应式布局，宽度自适应布局，弹性布局等，我们的适配代码是为了实现弹性布局：页面整体随手机屏幕宽度变化等比缩放。

window.onresize = r;
function r(resizeNum){
        //核心适配代码
    var winW = window.innerWidth;
    document.getElementsByTagName("html")[0].style.fontSize=winW*0.15625+"px";
        //核心适配代码
    if(winW>window.screen.width&&resizeNum<=10){
        setTimeout(function(){
            r(++resizeNum)
        }, 100);
    }
    else{
        document.getElementsByTagName("body")[0].style.opacity = 1;
    }
}
setTimeout(function(){r(0)}, 100)

在页面中或者js文件中放入这段适配代码即可在页面中按照以下所给比例使用rem。

rem：HTML5新的计量单位，相对于根元素的font-size来设置大小，一般浏览器默认font-size=16px，即1rem=16px，为了方便计算，并且保证在电脑的chrome中正确显示（chrome中字体最小显示为12px），我们使用js进行计算，使页面winW=640时，html的font-size=100px，页面为其它宽度时font-size按此规则等比缩放。因此我们的比例为：以640宽的UI图为基准，1rem=100px。
这里写图片描述
需要设置页面body的css：opacity：0，因为部分机型中viewport缩放是有时间差的，所以我们检测当其viewport缩放完成后再设置opacity：1。
3.页面构建
以宽度为640的UI图为基准：页面中所有需要用px单位的地方都按100：1换算为rem，当然也可以使用百分比（必要时），百分比没有换算关系，和web端用法一致。
html5标签和css3属性：尽量使用语义化标签，优化文档结构，减少标签嵌套，辅助性样式（如横线、图标等）尽量使用css3伪类构建，常见的css3属性在移动端支持度都很高，不存在兼容性问题。如果要使用比较特殊的，或者自己不太确定的，可以在该网站中检测其兼容性：http://caniuse.com/
4.js框架
如果页面简单，直接使用原生js即可，推荐使用HTML5的新的js api：querySelector，querySelectorAll等
复杂页面：zepto.js，与jquery用法高度相似。