1、使用rem
2、meta内容如下:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!-- 禁止ios设备将数字作为拨号连接,邮箱自动发送,点击地图跳转 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<!-- 强制全屏显示 -->
<meta name="full-screen" content="yes">
<!-- 开启对webapp的支持 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- web app 应用下状态条(屏幕顶部条)的颜色,默认值为 default(白色) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 禁止浏览器从的缓存中访问页面内容 -->
<meta http-equiv="Pragma" content="no-cache">
3、引入js代码:
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";
</script>
4、引入JS文件
<script type="text/javascript" src="js/setfontsize.js"></script>
内容如下:
(function (doc, win) {
var docEl = doc.documentElement, //获取html标签
//orientationchange方向改变事件
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//当前设备视口宽度
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); //load
})(document, window);
5、用rem代替px
如果750的设计图,设计图上是100px
在375的iphone6上 定义1rem
关于rem的文章:
http://isux.tencent.com/web-app-rem.html
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html