Question

我的手机/平板电脑设备方向有问题。所以我试图在设备被保持在风景中时显示div，但是当它以纵向保持时不显示。当我以纵向重新加载网站并将其转换为横向时，它可以工作，但是如果我在横向上刷新，那么div不再显示了吗？

我的Js。

window.addEventListener("orientationchange", function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        if(window.innerWidth > window.innerHeight){
            $('#rotate').css({display: "block"});
        }else{
            $('#rotate').css({display: "none"});
        }
    }
}, false);

我的Css

@media only screen and (max-width:768px){
#rotate{
    width:100vw;
    height:100vh;
    z-index:1000;
    position:fixed;
    top:0;
    left:0;
    display:none;
    background-color:#F8F8F8;
}

}

希望sombody可以帮助我！感谢

Answer 1

如果您只使用JavaScript，这个解决方案似乎更优雅，并且每次刷新页面时都能正常工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <title>Hello World</title>
<script type="text/javascript">
function rotate(){
    if (screen.width <= 768) { // do this if the screen is under 768px
        if (window.innerHeight < window.innerWidth) { // landscape mode
            document.getElementById("rotate").style.display='block';
        }
        else { // portrait mode
            document.getElementById("rotate").style.display='none';
        }
    }
}
</script>
<style type="text/css">
#rotate{
    width:100vw;
    height:100vh;
    z-index:1000;
    position:fixed;
    top:0;
    left:0;
    background-color:#F8F8F8;
}
</style>
    </head>
    <body>
<div id="rotate"><p>Hello world</p></div>
<script type="text/javascript">
window.onload = rotate();
</script>
    </body>
</html>

移动/平板设备定位部分工作

1 个答案: