1.head部分 通用写法；网上也有，不过有的可有有的可无；原理是兼容IOS透明栏目等问题，再者就是viewport（关键）
-
<head lang="en">
-
<meta charset="UTF-8">
-
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-
-
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-
-
<meta name="apple-mobile-web-app-title" content="">
-
-
<meta name="apple-mobile-web-app-capable" content="yes"/>
-
-
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-
-
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
-
-
<meta name="format-detection" content="telphone=no, email=no"/>
-
-
<meta http-equiv="Pragma" content="no-cache">
-
<meta http-equiv="Cache-Control" content="no-cache">
-
<meta http-equiv="Expires" content="0">
-
<title>web前端-马乐</title>
-
</head>
2.引入引用flexible.js；这是淘宝的兼容解决方案，最大到5.5寸；用的时候把viewport去掉，flexible.js会动态添加；
主要讲一下用法，网上的讲的太细却使很多网友没懂；flexible.js只有4K，作用是：
1.动态改写 标签
2.给 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
3.给 元素添加 font-size 属性，并且动态改写 font-size 的值
接下来就可以用了，若你的图示640的 就设置1rem=64px 如果是750的就设置1rem=75px；比如320X240的banner，那么就换算成5remX3.75rem(640为例)
下载地址
参考博文：
阅读(3407) | 评论(0) | 转发(0) |
