移動/平板設備定位部分正常

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;
}

}

希望有人能幫助我！ 謝謝

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 個解決方案

解決方案1
0 已采納 2015-03-18 14:50:39

移動/平板設備定位部分正常

問題描述

1 個解決方案

解決方案1 0 已采納 2015-03-18 14:50:39

解決方案1
0 已采納 2015-03-18 14:50:39