文档章节

h5页面适配

真座山雕
 真座山雕
发布于 2016/06/22 12:30
字数 289
阅读 41
收藏 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);

本文转载自:

共有 人打赏支持
上一篇: elk
真座山雕
粉丝 8
博文 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
微信网站

一个微信网站的H5页面,之前有完成大部分的页面, 需要对细节的优化和手机机型做适配,另外还有10个新页面需要切图做H5页面。

路边的石头
2016/06/20
9
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

没有更多内容

加载失败,请刷新页面

加载更多

[LintCode] Serialize and Deserialize Binary Tree(二叉树的序列化和反序列化)

描述 设计一个算法,并编写代码来序列化和反序列化二叉树。将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”。 如何反序列化或序列化二叉树是没有限制的,你...

honeymose
今天
5
0
java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
23
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
18
0
my.ini

1

architect刘源源
今天
16
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部