文档章节

h5页面适配

真座山雕
 真座山雕
发布于 2016/06/22 12:30
字数 289
阅读 39
收藏 2
点赞 0
评论 0

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
博文 47
码字总数 19546
作品 0
浦东
程序员
使用Flexible实现手淘H5页面的终端适配

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

问题达人 ⋅ 2016/03/29 ⋅ 0

使用Flexible实现手淘H5页面的终端适配 #17

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

GIFCOOL ⋅ 2016/09/22 ⋅ 0

微信小程序聊软件测试

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

白一客 ⋅ 2017/04/20 ⋅ 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 ⋅ 0

使用Flexible实现手淘H5页面的终端适配--大漠

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

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

移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方 ⋅ 2017/12/26 ⋅ 0

微信H5火爆 但入坑需谨慎

微信已经或者正在重新定义许多事物,H5是其中之一。   似乎就是在一夜之间,各大公司的市场、公关等负责推广和传播的部门人员,纷纷把目光投向了H5。尽管这个由HTML5简称过来的词汇,在大多...

雪深 ⋅ 2015/07/13 ⋅ 0

如何建设一个适配“百度轻舟计划”的移动站

百度轻舟计划已经出来了,目的很明确,提升百度在移动端的影响力,初步删除PC端的网页,加强移动站的网页权重吗,该计划要实现的目标是移动搜索达到百分百移动化。去年百度siteapp、开发者中...

卢松松 ⋅ 2014/03/13 ⋅ 0

8、手机适配问题之rem和lib-flexible

前言:GitHub:https://github.com/Ewall1106/mall 一、关于lib-flexible.js flexible方案是手淘经过多年的摸索和实战,总结出的一套移动端适配方案,这里我推荐一篇w3c大漠老师的一篇文章使...

Ewall_ ⋅ 06/15 ⋅ 0

HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223 ⋅ 2017/08/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

关于线程的创建

转自自己的笔记: http://note.youdao.com/noteshare?id=87584d4874acdeaf4aa027bdc9cb7324&sub=B49E8956E145476191C3FD1E4AB40DFA 1.创建线程的方法 Java使用Thread类代表线程,所有的线程对......

MarinJ_Shao ⋅ 24分钟前 ⋅ 0

工厂模式学习

1. 参考资料 工厂模式-伯乐在线 三种工厂-思否 深入理解工厂模式 2. 知识点理解 2.1 java三种工厂 简单工厂 工厂模式 抽象工厂 2.2 异同点 逐级复杂 简单工厂通过构造时传入的标识来生产产品...

liuyan_lc ⋅ 36分钟前 ⋅ 0

Java NIO

1.目录 Java IO的历史 Java NIO之Channel Java NIO之Buffer Java NIO之Selector Java NIO之文件处理 Java NIO之Charset Java 可扩展IO 2.简介 “IO的历史”讲述了Java IO API从开始到现在的发...

士别三日 ⋅ 40分钟前 ⋅ 0

[Err] ORA-24344: success with compilation error

从txt文本复制出创建function的脚本,直接执行,然后报错:[Err] ORA-24344: success with compilation error。 突然发现脚本的关键字,居然不是高亮显示。 然后我把脚本前面的空格去掉,执行...

wenzhizhon ⋅ 49分钟前 ⋅ 0

Spring Security授权过程

前言 本文是接上一章Spring Security认证过程进一步分析Spring Security用户名密码登录授权是如何实现得; 类图 调试过程 使用debug方式启动https://github.com/longfeizheng/logback该项目,...

hutaishi ⋅ 今天 ⋅ 0

HAProxy基于KeepAlived实现Web高可用及动静分离

前言 软件负载均衡一般通过两种方式来实现: 基于操作系统的软负载实现 基于第三方应用的软负载实现 LVS是基于Linux操作系统实现的一种软负载,而HAProxy则是基于第三方应用实现的软负载。 ...

寰宇01 ⋅ 今天 ⋅ 0

微软自研处理器的小动作:已经开始移植其他平台的工具链

微软将 Windows 10 、Linux 以及工具链如 C/C++ 和 .NET Core 运行时库、Visual C++ 2017 命令行工具、RyuJIT 编辑器等移植到其自主研发的处理器架构 E2。微软还移植了广泛使用的 LLVM C/C++...

linux-tao ⋅ 今天 ⋅ 0

JS常见this指代总结

1. dom0级事件处理程序的回调函数内 2. dom2级事件处理程序的回调函数内 3. setTimeout 4. setInterval var test = { testfn: function () { console.log(this); }};...

静默行 ⋅ 今天 ⋅ 0

泛型的基本原理

泛型是 JDK1.5 的一个新特性,其实就是一个『语法糖』,本质上就是编译器为了提供更好的可读性而提供的一种小「手段」,虚拟机层面是不存在所谓『泛型』的概念的。 在我看来,『泛型』的存在...

沧海一刀 ⋅ 今天 ⋅ 0

学好Java只需要做到这8点,年薪30W很简单!文末福利赠送!

前言: 大道至简,所以扎实有用的方法,其实都是很简单的,难在踏踏实实的执行过程。今天为大家介绍的就是Java学习的8个看起来非常简单的方法,快学起来吧。 为什么要学习Java? Java是目前最...

java高级架构牛人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部