码迷,mamicode.com
首页 > 移动开发 > 详细

关于移动端适配的问题

时间:2017-04-21 19:03:15      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:mat   支持   screen   java   显示   颜色   --   res   iphone   

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

关于移动端适配的问题

标签:mat   支持   screen   java   显示   颜色   --   res   iphone   

原文地址:http://www.cnblogs.com/yangAL/p/6744910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!