我可以强制 iPad 仅在横向模式下显示网站吗？ [复制]

Posted 2023-03-10

【中文标题】我可以强制 iPad 仅在横向模式下显示网站吗？ [复制]

【英文标题】：Can I force iPad to show website only in Landscape mode? [duplicate]

【发布时间】：2014-10-31 15:24:18

【问题描述】：

我想强制 iPad 仅以横向模式显示网站？

这可能吗？

【问题讨论】：

在肖像模式下会做什么？什么都不显示？

我的猜测是使用媒体查询根据宽度显示/隐藏内容。但这是在黑暗中的一个镜头。你能提供更多细节吗？

如果 screen.height > screen.width 显示图标将 ipad 变成横向？

【参考方案1】：

你可以用 CSS 来设置：

 @media only screen and (orientation:portrait)
    html body * 
         display:none;
    

 
 @media only screen and (orientation:landscape)
   /* your CSS */
 

在肖像模式中，所有元素都将被隐藏。您可以将<div>Switch to landscape</div> 设置为仅以肖像模式显示

【参考方案2】：

Safari 的界面仍将处于纵向模式，并且在将高度设置为 100% 时存在问题，但在纵向模式下您可以像这样旋转整个 html 元素

html, body 
  height: 100%;


@media screen and (orientation: portrait)
    html 
        -webkit-transform: translateY(-100%) rotate(90deg);    
        transform: translateY(-100%) rotate(90deg);
        -webkit-transform-origin: left bottom;    
        transform-origin: left bottom;    
    

或查看http://codepen.io/ckuijjer/full/Frosl