強制瀏覽器以縱向加載頁面

Question

我需要在手機和平板電腦上以縱向模式顯示我的頁面。 我怎樣才能強制瀏覽器以這個方向加載它。 或者我怎樣才能完全禁用橫向方向？

Answer 1

你不能強迫它:(

瀏覽器是一種移動應用程序，具有以橫向或縱向顯示的功能。

因此：您的問題可以重新提出：“ 是否可以要求瀏覽器僅以橫向打開？ ”可能是一些自定義頁面指令可以告訴瀏覽器以橫向模式打開自己（搜索可能是您可以在此處找到一些東西） ！）

但是，您可以按照https://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-在肖像，或景觀模式

這個想法是在所有頁面內容上使用CSS旋轉

@media screen and (orientation:landscape) {
  //set you content id
  #container {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width: /* screen width */ ;
    height: /* screen height */ ;
    overflow: scroll;
  }
}

---

我建議強制網站僅在橫向模式下顯示的解決方案，這些解決方案會輕輕地要求用戶旋轉瀏覽器（@JasonSebring）

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

Answer 2

#container {
    display: block;
}
@media only screen and (orientation: portrait) {
#container {
    height: 100vh;
    width: 100vh;
    overflow-x: auto;
    position: absolute;
    top: 100%;
    right: 0;
    transform-origin: 100% 0vh 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
}
@media only screen and (orientation:landscape) {
#container {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
}

Answer 3

也許您可以在容器css類中設置固定寬度並使用margin: 0 auto ，所以您將內容設置在中間，使頁面的印象始終處於縱向位置，例如：

.container{
    width:320px;
    margin: 0 auto; 
}