捏缩放是否触发媒体查询？

Question

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

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

我无法在线找到有关此行为的良好文档。我已经看到它偶尔提到这是设计行为，而捏缩放就像一个放大镜＆＃39;不应该激活媒体查询。我考虑完全禁用移动设备上的导航菜单。是否存在处理此问题的本地方法，或者这需要javascript解决方案？

这是两张照片。第一个是无缩放的导航菜单，第二个是移动设备缩放的导航菜单。

以下是我目前正在使用的两个媒体查询。请注意，我正在使用元视口标记来设置内容宽度;我无法想到任何可能影响这种行为的事情。

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

我也尝试过px测量。

如果需要更多信息，请与我们联系。谢谢你的帮助。

Answer 1

我在将视口固定到设备宽度并将其固定到绝对宽度以及在浏览器之间进行测试之间摇摆不定。将元视口标记设置为设备宽度适用于某些浏览器，但不是全部，并且看起来移动设备有historically poor support用于固定标头。我最终选择在某些设备上禁用标头;我认为任何其他解决方案都需要使用javascript，并且可能会在移动设备上产生相当差的性能。

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

在处理此问题后，我建议避免在移动设备上使用固定项目，除非您专门针对userAgent。一般来说，移动设备的尺寸过于动态，使用固定标头似乎比它们值得更麻烦。