• 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配置方法执行
  • 相关阅读:
    十:audio 音频
    八: 操作提示(wxml 即将废弃)
    九: 操作提示(js版本)
    七: 表单标签(3)
    四: 基本标签
    五: 表单标签(1)
    六: 表单标签(2)
    webservice和wcf和web.api简单介绍
    Qt 中事件与处理
    Qt 事件过滤器
  • 原文地址:https://www.cnblogs.com/haitaoblog/p/5413464.html
Copyright © 2020-2023  润新知