Question

我的网站在平板电脑（iPad等）的横向视图中没有问题，但在纵向视图中没有。

有没有办法在Bootstrap中禁用平板电脑的纵向视图？因此，当平板电脑旋转时，它不会旋转视图。

我相信这可以在原生移动应用程序中完成，所以它可以在网络上使用css / js等吗？

感谢。

Answer 1

Bootstrap也只是css和javascript。它确实是使您的网站使用纵向视图而不是禁用它的最佳解决方案。如果您正在寻找Bootstrap提供的东西，那么您可以使用这些媒体查询（基于Bootstrap的网格系统）做很多事情。

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Landscape phones and smaller */
@media (max-width: 480px) {

}

我不知道您禁用纵向视图的原因，但我非常确定您可以使其正常工作。在媒体查询括号中应用的所有css仅适用于给定的屏幕大小。

Answer 2

在Boostrap的小屏幕上强制拍摄风景。来源http://scala9simo.blogspot.com.ar/2015/04/trying-to-force-landscape-mode-on.html

/* In CSS file */
@media (max-device-width: 480px) and (orientation: portrait) {
  .landscape-in-phone {  
        display:block;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
         min-width:460px;
    }  
}

<!--In HTML file -->
<!--Page main container -->
<div class="landscape-in-phone">       
  <!--All body content here -->      
</div>

在Bootstrap中禁用纵向视图

2 个答案: