移动网站应仅以横向模式查看，而不应在 Ipad 和平板电脑中以纵向模式查看 [重复]

Posted 2023-03-14

【中文标题】移动网站应仅以横向模式查看，而不应在 Ipad 和平板电脑中以纵向模式查看 [重复]

【英文标题】：Mobile web site should be viewed in only Landscape mode but not in Portrait mobe in Ipad and Tablets [duplicate]

【发布时间】：2012-12-10 07:53:17

【问题描述】：

可能重复：Prevent orientation change in ios Safari

我有一个 html 5 网站，其中包含适用于 iPhone、iPad 和 android 平板电脑的 C# 代码，只能在横向模式下查看，而不能在纵向模式下查看。 如果用户将任何设备的方向更改为纵向模式，那么网站也应该只处于横向模式。

【问题讨论】：

此链接可能对您有所帮助 - ***.com/questions/5298467/…

【参考方案1】：

您无法在 WebView 内旋转您的网站，因此您需要在横向模式下锁定当前视图旋转。这样，此页面上的所有内容都将是横向的，包括您的网站。我认为这是唯一的解决方案。

【参考方案2】：

如果没有外部帮助应用程序，则无法从网络浏览器更改或冻结设备方向。锁定装置的整个想法似乎需要重新考虑和重新设计。这是您可以使用的一种方法。

我认为这对您的网站而言不是设备方向，而是内容中的横向设计。对于此要求，您应该将整个网站内容放入一个容器中，该容器必须始终缩放以填充浏览器窗口 (width:100%)，并保持其高度与宽度的所需纵横比。

在横向设备方向中，您的网站将照常运行。在纵向模式下，如果垂直对齐容器，内容将按比例缩小到当前宽度，在浏览器窗口的顶部和底部有黑色区域（很像在 4:3 屏幕上观看 16:9 电影时）。

如果您可以让您的内容在窗口顶部对齐（下方有较大的黑色区域），您可以通过指定元视口将整个缩放过程​​委托给浏览器本身：

<meta name="viewport" content="width=device-width">

如果它不符合您的需求，如果您提供有关网站细节的更多信息会很有帮助。