关于移动端适配的问题

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