如何为 iPhone 设置正确处理旋转的视口元标记？

view-port meta 是一个简短的标签，包含在 HTML 文档的头部，告诉浏览器应该如何呈现页面。 view-port 元元素将常规网站页面变成响应式页面。

视口元标记的选项：元视口的内容部分可以包含许多选项：

• width：用于设置布局视口的宽度。在我们的例子中，我们将其设置为“设备宽度”，它会覆盖 Apple 的默认设置 960 像素。
• initial-scale：用于设置页面的初始缩放和布局视口的宽度。我们将其设置为 1，这是默认视图，但您可以轻松增加此数字（不推荐）。
• minimum-scale：用于设置最小缩放级别，即用户可以缩小多少。
• maximum-scale：用于设置最大缩放级别，即用户可以放大多少。
• user-scalable：用于设置是否允许用户缩放内容。将其设置为“no”将阻止缩放。

默认情况下，view-port 标签使用如下：

此元标记在某些设备上的问题：元标记的默认用法在 iPhone 设备和某些 Android 手机上会引起一些问题。当屏幕的方向改变（纵向到横向）时会发生这种情况。

发生这种情况是因为即使设备已旋转到横向模式，内容的大小仍与纵向模式下的大小相同。这通常是由于在元标记中设置为“设备宽度”的“宽度”属性所致。由于view-port和device的宽度不同，当屏幕旋转到横向模式时，理论上view-port宽度应该变成设备高度，但这不能有效地实现。

对此的解决方案可以如下实现：

HTML

  

    
    

  

    
Welcome To GFG
  
    

        Default code has been 
        loaded into the Editor.
    

  

使用此方法的优点：

• 这似乎将设备锁定为 1.0 比例，而不管它的方向如何。

使用这种方法的缺点：

• 它完全禁用用户缩放（捏缩放等）。

iPhone 设备上的输出：

人像模式：

• 

• 横向模式：