如何在 iOS 设备旋转上进行视口内容宽度 = 设备宽度更新？

Question

我正在开发一个只能在 iPad 上显示的页面，所以我真的不需要担心让它与其他任何东西兼容。我正在制作一个我希望可滚动但不可缩放的页面，并且我希望它能够在不缩放内容的情况下更新页面宽度。

我试着做这样的事情：

<meta name='viewport' content='user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, width=device-width' />

在设备旋转之前效果很好。页面宽度不会更新到新的宽度，所以系统毫无意义。我怎样才能做到这一点？

Answer 1

一种选择是有两个单独的样式表，每个方向一个（如果您愿意，也可以在页面内完成）

在每个中，您都可以将“body { width: ---px; }”设置为设备的特定宽度。

当然，我见过其他可滚动但不可缩放的 iPad 网络应用程序，它们始终保持横向宽度 - 在纵向模式下，您还可以选择向左或向右滚动。在这种情况下，您只需像往常一样为 ipad 的横向宽度定义主体宽度，我相信它是 1024 像素。