h5页面开发步骤

一.移动端页面开发 (h5页面)

• 单位rem
• 动态计算html跟字体的大小
• 布局统一采用flex

// 统一页面长度控制，针对rem单位
(function(doc,w){
    var d=doc.documentElement,re='orientationchange' in window?'orientationchange':'resize';
    var r=function(){
        var cw=d.clientWidth;
        if(!cw)
            return;
        d.style.fontSize=(cw/37.5)+'px';
    };
    if(!doc.addEventListener)
        return;
    w.addEventListener(re,r,false);
    doc.addEventListener('DOMContentLoaded',r,false);
})(document,window);
复制代码

• 设计搞每个元素宽和搞除以20,就可以了， /2一半， /10跟字体大小是px, 换算

注意: 谷歌浏览器默认字体大小最小为12px,所以会有2px偏差，需要我们自己手动设置最小字体

##### 才能和设计稿一样
复制代码

flex布局介绍

Web Workers websocket

/* 移动端HTML5点击事件闪现灰色背景解决方案 */ html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

移动H5页面点击事件绑定失效的解决方法

最近做了一个H5的小游戏，遇到过页面点击事件在IOS上绑定失效的问题，查询的相关问题后，总结了几种出现问题情况：

1、点击事件在IOS上没有绑定成功

原因是在ios系统中,例如document,div,body这些本身并没有可以被点击的属性的元素不能作为托管点击事件的父元素。所以,用这样的方法进行事件托管，ios会获取不到你的document的点击事件，自然无法获取到你想要绑定的元素身上。

解决方法：在绑定点击事件的元素上绑定cursor:pointer;

2、在移动端运行时页面报错

在我解决掉第一种情况出现的问题后，H5游戏测试服中出现了游戏页面遮罩点击去不掉的情况：