移动端H5页面编辑器开发实战--经验技巧篇

一、前言

在上一篇《原理结构篇》中，主要针对移动端网页进行了分类描述，并介绍了H5编辑器的需求、原理以及框架结构，本文将延续开发实战这一主题，针对策略和开发技巧做进一步的介绍。

二、策略篇

2.1 适应策略

在上一篇文章中，简单对兼容方式做了区分，即固定尺寸兼容及百分比兼容，下面我具体介绍下为什么没有使用这两种方式以及目前所用的适应策略。

1）固定尺寸兼容

这种做法，一般是通过js自动生成viewport及scale数值，我们来看一段代码： 

var ua = navigator.userAgent;
var phoneScale = parseInt(window.screen.width) / 640;
if (/Android (\d+\.\d+)/.test(ua)) {
    var version = parseFloat(RegExp.$1);
    var qqv = ua.match(/MQQBrowser\/(\d+)/) ? ua.match(/MQQBrowser\/(\d+)/)[1] : 0;
    if (version > 2.3 && qqv < 6) {
        document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ", maximum-scale = " + phoneScale + ', target-densitydpi=device-dpi,user-scalable=no">')
    } else {
        document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi,user-scalable=no">')
    }
} else {
    document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')
}

首先，我们将设计稿尺寸定为640。 其次，iphone以及安卓2.3版本以下都可以通过直接指定viewport的width来实现固定尺寸兼容。 再次，针对安卓2.3以上的非qq浏览器及安卓2.3以上的qq浏览器v6以下，然后经过计算得出缩放比例后，写入scale。 
这种做法非常适合微信传播的短平快的项目，开发速度快，兼容性好是他的主要特点。 缺点也比较明显，在极少数老型号的手机系统里，可能出偶发放大再缩小至适应尺寸的问题，而在手机横屏时，此方式会偶发导致页面放大后，重新回到竖屏无法回到原适应尺寸。代码中针对qq浏览器做的兼容，也是为了避免在qq浏览器中出现类似问题。

2）百分比兼容

这种方式，是使用百分比代替原px的做法，一般包括以下步骤： 首先，设置viewport如以下代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其次，将页面中的css尺寸都改为百分比单位：

.section .sec_bg{width:100%;height:100%;positio