android - 高密度设备未检测到移动设备的 Foundation4 断点

Question

具体来说，在三星 Galaxy SIII 上测试我的网站时，我看到了为桌面定义的样式。

您如何让手机使用移动样式（考虑到 320 像素宽度）或使用“hide-for-small”类等？

目前，在那部手机上（我也想到了视网膜显示设备）你不会看到 .hide-for-small 或全局 css 被应用，只有更大（768px 及以上）视口的媒体查询。

有没有人有制造高 DPI 设备的经验，即： (-webkit-min-device-pixel-ratio: 2) 与 Foundation4 一起工作？

Answer 1

你还记得包含 Viewport 元标记吗？S3 的视口是360x604，因此如果您在纵向视图上看到大于 360 的媒体查询样式，则可能是您的视口配置错误。我鼓励使用以下视口标签和@viewport指令（在您的 CSS 中）：

<meta name="viewport" content="initial-scale=1.0">

@viewport { zoom: 1; }

另请查看有关S3 上的视口元标记的相关问题。