css - 仅在 iPad 上为纵向模式禁用缩放

Question

是否可以仅使用 CSS 来实现？不知何故将此与某些特定规则结合起来

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    /* Styles */
}

Answer 1

我不确定是否有 CSS 方式，但您可以使用 JS 通过创建一个脚本来实现，该脚本在纵向模式和横向模式下插入和删除此元标记：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

如果您希望这样做的全部原因是因为当方向更改时网站无法正确缩放，那么这个相同的元标记对此很有用，并且可以在不禁用我们非常喜欢的缩放的情况下使用：

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

虽然它不是那么好，因为它无论如何都会禁用某些设备的缩放。