处理短屏下缩放，以及初始化时固定页面大小，防止竖屏下弹出键盘或横屏时页面发生缩放的情况

Lucky_Boy 发布于2019-08-23 14:58 / 1092人阅读

摘要：将上述方法更新为初始化单屏全屏布局时使用短屏下自动缩放长页面时使用不缩放显示竖屏浏览提示框竖屏下恢复默认显示效果

    //function initScreen(){
    //    $("html").css("font-size",$(window).height()/$(window).width()<1.5 ? ($(window).height()/603*312.5+"%") : ($(window).width()/375*312.5+"%"))
    //}
    //2016-01-06将上述方法更新为
    var initScreen=function(callback){//初始化html  font-size
        $("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%")); //单屏全屏布局时使用,短屏下自动缩放
        //$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//长页面时使用,不缩放
        if(callback)callback();
    }


function _onorientationchange(e){
    if(window.orientation==90||window.orientation==-90){
        $("#forhorview").css("display", "-webkit-box");  //显示竖屏浏览提示框
    }else{//竖屏下恢复默认显示效果
        var st=setTimeout(initScreen,300);
         $("#forhorview").css("display", "none");    
    }
    _resize(e);
}
$(function(){
    initScreen();
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",     function(e){_onorientationchange(e);}, false);
})

云服务器 GPU云服务器短屏下竖屏下横屏时页面包含的处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101429.html

H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

honhon 2019-08-21 10:51 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

Little_XM 2019-08-30 13:07 评论0 收藏0