Html5应用屏幕适配方案

前言

相信现在不少人用Html5来制作手机页面，但是最大的问题就是屏幕的适配问题了。

虽然市面上有很多的移动框架可以帮助你解决不少问题，但一旦发生问题，很多人都会懵了。

本篇文章的目的就是为了让大家了解适配方案，以便解决问题。

屏幕适配的多种方案：

从上图我们可见，为iPhone5中微信打造的页面是不能直接显示到其他分辨率手机上的，否则会造成有大量空白区域或内容缺失的情况，如下图：

为了防止这样的情况，我们需要使用各种适配方案达到最佳效果和体验。

同比缩放

这种方法是将宽、高按照相同的缩放比例来进行缩放。一般情况下，我们对其进行缩小操作。

此方法会产生白边

若，容器宽 > 容器高 && 画布宽 < 画布高 || 容器高 > 容器宽 && 画布高 < 画布宽

则，缩放比 = Math.min(容器宽 / 画布宽, 容器高 / 画布高);

居中剪裁

这种方法是同比缩放的变体，我们对画布做放大操作。

此方法会将上下或左右的部分内容切掉

若，容器宽 > 容器高 && 画布宽 < 画布高 || 容器高 > 容器宽 && 画布高 < 画布宽

则，缩放比 = Math.max(容器宽 / 画布宽, 容器高 / 画布高);

改动仅仅是将min改成了max即可。

定向剪裁

这种方法没什么可说的，只是在做完居中剪裁后对画布位置做一个偏移，剪裁区域的不同而已。

这样做的好处

我们可以完全按照PSD上的坐标位置来写CSS，不需要计算百分比，不需要目测像素点。适合快速开发。

而且效果基本上也能达到满意的程度。

至于所遇到的其他问题（我已经知道有一些问题），就留给大家自行尝试。

实在没办法的时候还请留言，我将公布答案。

最后附上代码：

function adaptive(c, mode, width, height) {
    /// <summary>自适应</summary>
    /// <param name="c" type="HTMLElement">适配模式</param>
    /// <param name="mode" type="String">适配模式</param>
    /// <param name="width" type="Number">原始宽度</param>
    /// <param name="height" type="Number">原始高度</param>

    var cs = c.style,
        parentElement = c.parentElement || c.parentNode || document.body,
        pWidth = parentElement.clientWidth,
        pHeight = parentElement.clientHeight,
        rotate = 0,
        scaling;

    if (pWidth < pHeight && width > height || pHeight < pWidth && height > width) {
        // 检查是否需要自动旋转画布

        rotate = 90;

        pWidth = parentElement.clientHeight,
        pHeight = parentElement.clientWidth;
        scaling = this._scaling = (mode == "cover" ? Math.max : Math.min)(pWidth / width, pHeight / height);

        // 计算旋转后的居中坐标
        cs.marginTop = (pWidth - height * scaling) / 2 + "px";
        cs.marginLeft = (pHeight - width * scaling) / 2 + "px";
    } else {
        rotate = 0;

        scaling = (mode == "cover" ? Math.max : Math.min)(pWidth / width, pHeight / height)

        // 计算未旋转的居中坐标
        cs.marginTop = (pHeight - height * scaling) / 2 + "px";
        cs.marginLeft = (pWidth - width * scaling) / 2 + "px";
    }

    // 应用旋转值
    cs["transform"] = "rotate(" + rotate + "deg)";

    // 计算画布宽高
    cs.width = (width * scaling) + "px";
    cs.height = (height * scaling) + "px";
}

使用方法：

adaptive函数，需要传入4个参数。

分别是：

c：要进行缩放的Html元素

mode：接受两个值 cover 和 contain

width：原始宽度（未进行任何缩放时的宽度）

height：原始高度（未进行任何缩放时的高度）

结束，撒花~