捏缩放会触发媒体查询吗？

Question

我一直在我的本地机器上开发一个网站，顶部有一个固定的导航菜单。当浏览器放大时，我使用媒体查询来压缩标题中对象之间的空间，以便所有对象都适合屏幕，这在桌面上效果很好。

但是，在移动设备 (Android Galaxy S3) 上进行测试时，我注意到这些媒体查询不会在捏缩放时触发，导致图标扩展超出移动视口的限制。

我在网上找不到这种行为的良好文档。我看到它偶尔提到这是设计行为，捏缩放就像一个“放大镜”，不应该激活媒体查询。我正在考虑完全禁用移动设备上的导航菜单。是否有本地方法来处理这个问题，或者这需要 javascript 解决方案吗？

这里有两张照片。第一个是导航菜单不缩放，第二个是导航菜单在移动设备上捏缩放。

以下是我目前使用的两个媒体查询。请注意，我也使用元视口标签来设置内容宽度；我想不出任何其他可能影响这种行为的东西。

@media screen and (max-width: 74em){...}
@media screen and (max-width: 47em){...}

我也尝试过像素测量。

如果需要更多信息，请告诉我。感谢您的帮助。

Answer 1

我在将视口固定为设备宽度和将其固定为绝对宽度以及在浏览器之间进行测试之间摇摆不定。将元视口标签设置为 device-width 可以在某些浏览器上使用，但不是全部，而且移动设备似乎有historically poor support 用于固定标题。我最终选择在某些设备上简单地禁用标题；我认为任何其他解决方案都需要使用 javascript，并且可能会在移动设备上产生相当差的性能。

同样，将视口设置为 device-width 可能会将设置为 100% 高度的 HTML 页面的主体压缩到小于设备高度，如果您使用页脚，这是一个问题。我最终通过根据纵横比用额外的空间填充身体来解决这个问题。

在处理完这个问题后，我建议避免在移动设备上使用固定项目，除非您专门针对 userAgent。一般来说，移动设备的大小太动态了，使用固定的标头似乎比它们的价值要麻烦一些。