zoukankan      html  css  js  c++  java
  • 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配置方法执行
  • 相关阅读:
    JavaScript原型链详解
    Js作用域与闭包
    tjs 在嵌套函数中this关键字引用head对象
    NodeJS stream 一:Buffer
    NodeJS Stream 二:什么是 Stream
    NodeJS Stream 三:readable
    NodeJS Stream 四:Writable
    VSS又一次出错了,神出鬼没的
    VS2005的关于母版页嵌套的一个小技巧
    【转】SQL Server数据库开发的二十一条军规
  • 原文地址:https://www.cnblogs.com/haitaoblog/p/5413464.html
Copyright © 2011-2022 走看看