html5 750 REM JS换算方法
在安卓手机低版本浏览器,如果进页面快速执行的话会出现计算宽度不正确的情况,解决方法是放在onload方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决,也就是第版本浏览器使用document.ready的方法执行,其他高版本的手机不需要使用,当然还需要判断IOS手机,IOS手机不需要判断
/*REM单位换算方法 iphone6适配*/
function resizeRoot(){
var Dpr = 1, uAgent = window.navigator.userAgent;
//判断IOS 系统
var isIOS = uAgent.match(/iphone/i);
//计算APP宽度
var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize;
if (window.devicePixelRatio) {
wDpr = window.devicePixelRatio;
} else {
//识别IOS分辨率方法
wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1;
}
//计算IOS 系统宽度
if(isIOS) wWidth = screen.width;
wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
window.screenWidth_ = wWidth;
//赋值给html fontsize值
document.getElementsByTagName('html')[0].dataset.dpr = wDpr;
document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
}
//判断安卓手机浏览器低版本的用ready方法执行
function appsion(){
uAgent = window.navigator.userAgent;
var isIOS = uAgent.match(/iphone/i);
if(navigator.appVersion.substring(navigator.appVersion.length-6)<537 && !isIOS){
document.ready=function(){
resizeRoot();
}
}else{
resizeRoot();
}
}
appsion();
//rem配置方法执行
html5 750 REM JS换算方法的更多相关文章
- 移动端rem.js使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...
- 移动端rem.js的使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- 自适应rem.js
用rem.js来实现自适应屏幕大小,要注意border不用rem做单位 代码如下: (function (doc, win) { //orientationchange : 判断手机是水平方向还是垂 ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- 7-80 HTML5新增的JS选择器
7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...
随机推荐
- [原创]# 玩转nginx系列
首先先上如何彻底删除nginx 看到这个标题的小伙伴都惊呆了,还不知道怎么搞,却叫我怎么卸载.为什么我要这样,其实,Reset也是一种解决问题的方式嘛. 首先执行下卸载命令 sudo apt-get ...
- ionic框架前端生产环境的简单部署
1. 效果对比 1.1 开发环境 css+js+lib文件大小为好多M :) 1.2 部署环境(生产环境) css+js+lib文件大小约为800K 文件大小:好多M–>800K(多少自己试下) ...
- 获取当前位置信息-ios
locationManager= [[CLLocationManager alloc] init];//位置管理器 locationManager.desiredAccuracy = kCLLocat ...
- [React] React Router: Named Components
In this lesson we'll learn how to render multiple component children from a single route. Define a n ...
- c# 操作PPT
前段时间要做一个把指定图片放到新建的ppt的东西,在网上找了点资料看了一下,发现用C#做好像是最简单的一个,一下是在网上找的一段代码,直接贴进去就能够执行,可是在执行之前一定要加入dll支持: 项目 ...
- C语言union关键字
union 关键字的用法与struct 的用法非常类似. union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在union 中所有的数据成员共用一个空间,同一时间 ...
- FreeMarker辅助
/** * FreeMarker 辅助类 * @author Rubekid * */ public class FreeMarkerHelper { /** * 模板文件存放目录 */ privat ...
- 读取oracle页面或者进程卡住不动(死锁)
oracle最坑爹的地方:你insert update delete之后 或者kill死锁的时候记得一定要提交事务不然就是死锁卡在那里了 记住 kill死锁也是要提交事务的 select * ...
- Android-应用的本地化及知识拓展之配置修饰符
步骤很简单,只需要两步: 1.创建带有目标语言的配置修饰符的资源子目录 2.将可选资源放入该目录下,android系统会自动处理后续工作 在这里我们需要讲解一下配置修饰符. 中文的配置修饰符:-zh, ...
- eclipse中安装genymotion
在eclipse中安装genymotion.安装genymotion需要先安装virtualbox.选择Help选项中的install new software 然后点击进去点击ADD,在locati ...