web移动端适配方案实践

web移动端适配方案实践

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: [email protected]
QQ: 1724338257

移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。

本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。

1. Step1: 单位选择rem

在移动端，由于设备分辨率和DPR(DevicePixelRatio)差异，使用px(像素)作为单位显然适配起来非常麻烦。常见的单位有：px、em、rem、vw，这四种单位的介绍已经是老生常谈，本方案最后选择的是使用 rem，相比px和em，优势是毋庸置疑的，开发者不必再考虑设备分辨率改变导致的元素布局问题，只需要改变根元素 的 font-size 就能改变所有的字体大小，相当省心。并且相对于vw，可以直接将移动端页面元素在屏幕居中，再加上良好的兼容性：IE8以上版本和其他浏览器都已经支持，是做响应式页面的不二之选。

2. Step2: 消除DPR差异

消除DPR差异只需要将布局视口大小设为设备像素尺寸，可以通过修改viewport参数来实现。

首先需要计算缩放比，例如 iPhone5-DPR=2，则 scale=0.5

var scale = 1 / window.devicePixelRatio;

接着，修改viewport参数initial-scale、maximum-scale、minimum-scale即可

document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

3. Step3: 动态设置 html 标签根字体大小

如何实现页面元素跟随设备尺寸等比缩放？step1中已经选择了rem作为单位，在此处只需要固定设置设计稿 html 标签的字体大小，根据计算公式：

html字体大小 = 基准n * (clientWidth / 设计稿宽度)

为了方便计算，基准n使用100，设计稿宽度约定使用750px，假设设备宽度为750px (iPhone6/7/8)，那么计算可得根字体大小为font-size: 100px;：

html字体大小 = 基准n * (clientWidth / 设计稿宽度) = 100 * （750 / 750) = 100

根据上述推算，在html页面中引入下面代码即可自动完成计算：

(function(doc, win) {
	var docEl = doc.documentElement, // 获取html标签
		// 页面大小改变事件
	    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            // 动态设置html标签字体大小，便于使用rem缩放
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

注意：

1. rem是相对尺寸单位，是相对于html标签字体大小的单位
2. 早先给html标签设置 font-size: 62.5%; 只是为了实现 1rem = 10px 从而使计算方便，不能满足此处页面元素跟随设备尺寸等比缩放的需求
3. 文字字体大小建议不要用rem换算，否则会使得移动端页面字体在PC页面或者大屏手机看起来非常大

4. Step4: 将设计图中的尺寸换算成 rem

Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。

举例来说，原本按照设计稿750px宽度开发的页面，.box在设计稿中的宽高为60px，css如下：

.box {
    width: 60px;
    height: 60px;
}

进行rem转换后为

.box {
    width: 0.6rem;
    height: 0.6rem;
}

即按照公式：

元素rem尺寸(本案例0.6rem) = 设计稿像素尺寸(本案例60px) / 动态设置的html标签的font-size值(本案例100)

如：60px宽的div，不必关心屏幕尺寸缩放，只需要除以100，设置 width: 0.6rem; 即可

5. Step5: 媒体查询设置body字体大小

其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小，使得大屏展示更多的文字内容。

本方案采用媒体查询来控制文字大小，将屏幕分为三等：321px以下 / 321px-400px之间 / 400px以上，并针对不同尺寸设置文字大小(px)即可。

@media screen and (max-width: 321px) {
    body { font-size:16px; }
    header,footer { font-size:16px; }
}
@media screen and (min-width: 321px) and (max-width:400px) {
    body { font-size:17px; }
    header,footer { font-size:17px; }
}
@media screen and (min-width: 400px) {
    body { font-size:19px; }
    header,footer { font-size:19px; }
}

6. 其他

6.1 特殊css处理

移动端相对于pc端，需要特殊处理一些样式

1. 点击高亮效果

在移动端浏览器会存在点击出现高亮的效果，在项目中一般不需要这个默认的效果，需要把点击颜色设置成透明

-webkit-tap-highlight-color:transparent;

2. input默认样式清除

在移动设备的浏览器中input标签一般会有默认的样式，通过border=none,outline=none无法去除如立体效果、3d效果等，需要添加下列样式

-webkit-appearance: none;

3.最小宽度和最大的宽度

在移动端开发的时候，如果想限制某个元素的大小，选用 max-width 限制最大值，为了不让用户无止境的缩放，使用min-width 防止在超小屏幕上显示错乱(不考虑小屏幕手机用户)，移动端为了在宽度方向上进行适配会使用百分比宽度，高度方向上由于页面的高度由内容撑开的，所以高度还是使用具体的值。

6.2 IE默认使用最高版本

ie浏览器是web前端一大毒瘤，在开发过程中发现，如果不设置指定meta标签，ie会直接使用ie7内核渲染，这显然不是开发者所希望的，添加下面的meta标签即可：

7. 总结

本文讲述了开发项目中的移动端的适配方案，采用的是 rem + html根字体大小设置的方案。目前市面上还有很多其他的适配方案，此处不再一一列举，不足之处还请指正。