css 强制浏览器以纵向方向加载页面

cxfofazt  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(129)

我需要在移动的和平板电脑上以纵向模式显示我的页面。如何强制浏览器以这种方向加载它。或者,我如何完全禁用横向方向?

7gyucuyw

7gyucuyw1#

你不能强迫它:(
浏览器是移动的上的一个应用程序,它能够以横向或纵向显示。
所以:你的问题可以重新提问为:“是否可以要求浏览器只在横向模式下打开?”可能是一些自定义页面指令可以告诉浏览器在横向模式下打开自己(搜索可能是你可以在这里找到一些东西!)
但是,您可以使用css技巧(不推荐使用),如https://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode中所述
这个想法是使用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;
  }
}

我推荐forcing web-site to show in landscape mode only上提到的解决方案,它温和地要求用户旋转浏览器(@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>
5n0oy7gb

5n0oy7gb2#

#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);
}
}
xwbd5t1u

xwbd5t1u3#

也许你可以在你的容器css类中设置一个固定的宽度,也可以使用一个margin: 0 auto,这样你就可以把内容设置在中间,给人一种页面总是处于纵向位置的印象,例如:

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

相关问题