如何设置iPhone的视口元，以正确处理旋转？ [英] How to set viewport meta for iPhone that handles rotation properly?

问题描述

所以我一直在使用：

 < meta name =viewportcontent =width = device-width ; initial-scale = 1.0; maximum-scale = 1.0;/> 
  

让我的HTML内容在iPhone上很好地显示。它可以很好地工作，直到用户
将设备旋转到横向模式，其中显示保持约束为320px。

是否有一种简单的方法来指定一个视口响应用户更改
设备方向的更改？或者我必须使用Javascript来处理它？<​​/ p>是：

 < meta name =viewportcontent =initial-scale = 1.0，maximum-scale = 1.0 /> 
  

无论方向如何，这似乎都会将设备锁定为1.0比例。作为一个副作用，它确实会禁止用户缩放（缩放缩放等）。

So I've been using:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

to get my HTML content to display nicely on the iPhone. It works great until the user rotates the device into landscape mode, where the display remains constrained to 320px.

Is there a simple way to specify a viewport that changes in response to the user changing the device orientation? Or must I resort to Javascript to handle that?

解决方案

Was just trying to work this out myself, and the solution I came up with was:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

This seems to lock the device into 1.0 scale regardless of it's orientation. As a side effect, it does however completely disable user scaling (pinch zooming, etc).

这篇关于如何设置iPhone的视口元，以正确处理旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！