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"> 

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