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

Posted 2023-03-06

【中文标题】高密度设备未检测到移动设备的 Foundation4 断点

【英文标题】：Foundation4 breakpoint for mobile not detected for high density devices

【发布时间】：2013-09-04 07:31:59

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

@viewport zoom: 1;

还可以查看 S3 上视口元标记上的 related question。