移动端适配解决方案

2017-2-24 liuweibo JavaScript

1.meta标签

标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

2.css单位rem

简单的理解，rem就是相对于根元素html的font-size来做计算，而我们的方案中使用rem单位，是能轻易的根据html的font-size计算出元素的盒模型大小

3.前端实现方案

了解了前面一些相关概念之后，接下来我们来看实际解决方案。在整个手淘团队，有一个名叫lib-flexible的库，而这个库就是用来解决H5页面终端适配的

lib-flexible是一个制作H5适配的开源库，可以点击这里下载相关文件，获取需要的JavaScript和CSS文件

当然你可以直接使用阿里CDN：

使用方法

lib-flexible库的使用方法非常的简单，只需要在Web页面的中添加对应的flexible_css.js,flexible.js文件：

执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px

如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。

除此之外，在引入lib-flexible需要执行的JS之前，可以手动设置meta来控制dpr值，如：

其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。在此不建议手动强制设置dpr，因为在Flexible中，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。

 if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); 
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3))
 { dpr = 3; } 
else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } 
else { dpr = 1; } 
} else
 { // 其他设备下，仍旧使用1倍的方案 dpr = 1; } 
scale = 1 / dpr;
 }

flexible的实质

动态改写标签

给元素添加data-dpr属性，并且动态改写data-dpr的值

给元素添加font-size属性，并且动态改写font-size的值

创建HTML模板

 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <link rel="apple-touch-icon" href="favicon.png">
        <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
        <title>再来一波</title>
    </head>
    <body>
        <!-- 页面结构写在这里 -->
        

    </body>
</html>

目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出

cssrem

CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件

分享到： QQ空间新浪微博腾讯微博微信更多

« MySQL联合查询 | 育灵童开发中心员工调薪分档及标准»

移动端适配解决方案

日历

存档

最新评论

链接

搜索