文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
10
0
vm GC 日志 配置及查看

-XX:+PrintGCDetails 打印 gc 日志 -XX:+PrintTenuringDistribution 监控晋升分布 -XX:+PrintGCTimeStamps 包含时间戳 -XX:+printGCDateStamps 包含时间 -Xloggc:<filename> 可以将数据保存为......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部