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 ...
随机推荐
- 尝鲜党:Nexus5、6刷安卓M教程
说明: 进入recovery的命令:adb reboot recovery 进入bootloader的命令:adb reboot bootloader 概述 F:\Nexus5\AndroidM\ha ...
- Linux安装WebLogic12
# groupadd weblogic# useradd -g weblogic weblogic# passwd weblogic# mkdir -p /var/bea# chown -R webl ...
- linux 远程自动登录脚本 (注test.exp)
#! /usr/bin/expect set timeout 30spawn ssh -l root 192.168.239.148 expect "password:"send ...
- Java static块
首先,我们看一个实际例子: class Test{ public static int X=100; public final static int Y=200; public Test(){ Sys ...
- Linux实现密钥登陆
公司为了安全,一直都采用密钥登陆远程SSH,现在有了自己的服务器,自己又学者配了一把,下面就是配置笔记. 1.登陆未设置密钥的Linux服务器 2.工具新建用户密钥生成向导 3.选择生成密钥的加密方式 ...
- Beacon浅析
作者:hongbosun 一.Beacon简介 Beacon是基于BLE技术实现的物理设备.BLE(全称Bluetooth Low Energy)是蓝牙4.0技术规范的一部分.它起源于Nokia的Wi ...
- sql server代理中作业执行SSIS包失败
RT,执行失败了,总是只提示一句“以xxxx用户身份执行失败”,很难找原因. 引用 http://bbs.csdn.net/topics/300059148 Sql2005如何用dtexec运行ssi ...
- 查询矩形范围内的"点"要素
步骤 1,首先在含有主视图控件 ESRI.ArcGIS.Controls.AxMapControl mapCtrl_main 的主类中定义一个 IEnvelope 成员变量,用于记录鼠标在主视图控件画 ...
- eclipse 插件 最新 eclipse4.x 插件
Properties Editor: 中文显示属性配置文件 help ——> install new SoftWare ——>add Name: xx Location: http: ...
- Swift - IBOutlet返回nil(fatal error: unexpectedly found nil while unwrapping an Optional value)
在Swift 中 ViewController 默认构造方法不关联同名的xib文件 在使用OC的时候,调用ViewController的默认构造函数,会自动关联到一个与ViewController名字 ...