文档章节

h5页面适配

真座山雕
 真座山雕
发布于 2016/06/22 12:30
字数 289
阅读 40
收藏 2

html跟字体大小设置为100px, 其他都以html为根基, 使用rem相对单位。不同屏幕, 使用一下函数动态设置html的跟字体大小

// 页面适配

(function() {
   var scale,deviceWidth;
   window.screen.width > 414 ? deviceWidth=(window.screen.width/window.devicePixelRatio) : deviceWidth=window.screen.width;
   window.devicePixelRatio >= 1.5 ? scale=deviceWidth/320* 100 : scale=100 ;
   document.getElementsByTagName("html")[0].style.fontSize = scale+"px";
   // alert(scale +'\n'+document.getElementsByTagName("html")[0].style.fontSize)
})();

或者  

(function (doc, win) {
   // 分辨率Resolution适配
   var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
         };

   // Abort if browser does not support addEventListener
   if (!doc.addEventListener) return;
   win.addEventListener(resizeEvt, recalc, false);
   doc.addEventListener('DOMContentLoaded', recalc, false);

   // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
   (function(){
      return;
      var dpr = scale =1;
      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;

      //
      var metaEl = "";
      metaEl = doc.createElement('meta');
      metaEl.setAttribute('name', 'viewport');
      metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      if (docEl.firstElementChild) {
         docEl.firstElementChild.appendChild(metaEl);
      } else {
         var wrap = doc.createElement('div');
         wrap.appendChild(metaEl);
         doc.write(wrap.innerHTML);
      }
   })();

})(document, window);

本文转载自:

共有 人打赏支持
真座山雕
粉丝 9
博文 49
码字总数 19546
作品 0
浦东
程序员
使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

问题达人
2016/03/29
29
0
使用Flexible实现手淘H5页面的终端适配 #17

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

GIFCOOL
2016/09/22
56
0
微信小程序聊软件测试

微信小程序上线已经有段时日了,随着刚开始的大家卸载手机APP,到重新下载至手机的过程,并没有多久。用完即走,暂时来看小程序并没有干掉APP。 那么问题来了,作为一个软件工程师,关注的点...

白一客
2017/04/20
451
1
前端屏幕适配的总结

1.web app变革之rem(http://isux.tencent.com/web-app-rem.html) 2.移动前端自适应解决方案和比较(http://caibaojian.com/mobile-responsive-example.html) 3.前端开发终端适配方案(http://w......

IT追寻者
2016/08/03
195
0
使用Flexible实现手淘H5页面的终端适配--大漠

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

拉普拉斯婷
2016/12/15
35
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

人生苦短:Python里的17个“超赞操作

人生苦短,我选Python”。那么,你真的掌握了Python吗? 1. 交换变量 有时候,当我们要交换两个变量的值时,一种常规的方法是创建一个临时变量,然后用它来进行交换。比如: # 输入 a = 5 b ...

糖宝lsh
41分钟前
4
0
咕泡-spring中常用设计模式概述

设计模式就是经验之谈,供后人借鉴,解决一些具有代表性的问题 设计模式来源于生活,反过来帮助我们更好生活 设计模式提升代码的可读性、可扩展性、维护成本、复杂业务问题 千万不要死记硬背...

职业搬砖20年
今天
2
0
day59-20180817-流利阅读笔记-待学习

假·照骗,真·社交焦虑 雪梨 2018-08-17 1.今日导读 发朋友圈之前,不少人为了展现更美好的生活状态会对照片加以“微调”,或是加个滤镜显得逼格更高,或是磨个皮瘦个脸拉个大长腿。现在,国...

aibinxiao
今天
19
0
OSChina 周五乱弹 —— 姑娘在这个节日里表白你接受么?

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Sharon啊:完全被这个小姐姐圈粉了,学两首她的歌去哈哈 分享王贰浪的单曲《往后余生(翻自 马良)》 《往后余生(翻自 马良)》- 王贰浪 手...

小小编辑
今天
949
16
为什么HashMap要自己实现writeObject和readObject方法?

为什么HashMap要自己实现writeObject和readObject方法? 如果你有仔细阅读过HashMap的源码,那么你一定注意过一个问题:HashMap中有两个私有方法。 private void writeObject(java.io.Objec...

DemonsI
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部