前言
相信现在不少人用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:原始高度(未进行任何缩放时的高度)
结束,撒花~