H5开发小结

最近两周忙了个H5开发的项目，上周基本告于段落，借着周末的时间把最近在开发中遇到的问题总结一下，加深下记忆。

UI看起来很简单，就是一个手机遥控器界面，但是距离上次使用HTML+JS已经有5年的时间了，所以这次刚开始做的时候是既熟悉又陌生，闲话少说，UI界面如下图所示： 遥控器UI.png

第一次拿到设计图时，首先想到的是屏幕适配问题，因为要同时满足Android和IOS，所以在兼容上要格外注意，开发的过程中磕磕绊绊，不过好歹问题都得到了解决，下面描述下出现的问题和解决方法。

1.基于哪种分辨率进行开发

不同手机分辨率不一样，但是在UI/ICON设计时要有个统一的参考，这次使用的是375x667(iphone6/7/8)。

2.UI使用哪种布局

在第一阶段完成UI开发时，使用的是绝对布局，但是在做兼容性测试的时候出现了问题，比如中间方向轮盘由于是绝对定位，在某些机型上并没有居中显示，所有两边留白间距不对等问题，所以第二阶段调整时，统一使用了相对布局，保证不论哪种尺寸，位置要相对独立。

3.ICON真机显示太小或者模糊

因为是使用375x667分辨率进行的切图，所以在真机上显示的时候图片过小或者模糊不清，为了解决这个问题，考虑过使用响应式布局，针对不同的分辨率设计不从尺寸的icon，但是成本太高，所以最终使用了1920x1080p规格的icon。

4.双击缩放和双指缩放

手机浏览器默认支持缩放功能，但是从功能需求上讲，需要禁止该功能，为了解决这个问题，需要实现以下两点：

//设置内容宽度为屏幕宽度，禁止缩放功能
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

//页面渲染完后执行以下函数
// 阻止双击放大
    document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);

    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);  

    // 阻止双指放大
    document.documentElement.addEventListener('gesturestart', function(event) {
        event.preventDefault();
    });

5.中文乱码

head中添加charset

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

6.IOS div默认灰背景问题

IOS显示时，第一次点击icon时会显示默认的灰背景，之后点击能够正常显示，添加以下css样式解决：

*{
   -webkit-tap-highlight-color:transparent;
}

7.div如何自动充满剩余高度

菜单键以下按键：音量+-/频道+-/静音/快捷按键，需要在剩余空间内垂直方向居中显示，为了解决这个问题，将这些按键统一放入父div中，并动态设置父div的高度，按键再各自自适应高度即可。

//页面元素渲染完后，动态计算父div的高度
var windowHeight = document.documentElement.clientHeight;//窗口高度
document.getElementById("bottom").style.height = windowHeight - 445 + "px"; //整个屏幕内容分为上下两块，上面div高度为445

总结

好记性不如烂笔头，记录下来防止以后被这些问题再次困扰。