如何在 iOS 设备旋转时更新视口 content-width=device-width?
我正在开发一个仅在 iPad 上显示的页面,因此我真的不需要担心使其与其他任何东西兼容。我正在制作一个我想要可滚动但不可缩放的页面,并且我希望它能够更新页面宽度而不缩放内容。
我尝试做这样的事情:
<meta name='viewport' content='user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, width=device-width' />
效果很好,直到设备旋转。页面宽度不会更新为新宽度,因此系统毫无意义。我怎样才能做到这一点?
I am developing a page that will only be displayed on iPad, so I don't really need to worry about making it compatible with anything else. I am making a page that I want to be scrollable, but not scalable, and I want it to update the page width without scaling the content.
I tried doing something like this:
<meta name='viewport' content='user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, width=device-width' />
That works great, until the device is rotated. The page width does not update to the new width, so the system is pointless. How can I make this work?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
一种选择是有两个单独的样式表,每个方向一个(如果您愿意,也可以在页面内完成)
在每个中,您可以将“body { width: ---px; }”设置为设备的特定宽度。
当然,我见过其他可滚动但不可缩放的 iPad Web 应用程序,它们只是始终保持横向宽度 - 您还可以选择在纵向模式下向左或向右滚动。在这种情况下,您只需像往常一样为 ipad 的横向宽度定义主体宽度,我认为是 1024px。
One option is to have two separate stylesheets, one for each orientation (this could also be done in-page if you'd prefer)
In each, you could set the "body { width: ---px; }" to the specific width of the device.
Of course, I have seen other iPad webapps that are scrollable but not scaleable that simply stay the landscape width at all times - you just also have the option to scroll left or right when in portrait mode. In this case you would simply need to define body width as usual for the landscape width of the ipad, which I believe is 1024px.