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

Question

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

如何让手机使用移动样式（考虑宽度为320px）或使用“隐藏为小”类等？

目前，在那部手机上（我也是视网膜显示设备）你不会看到.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上的视口元标记上查看此related question。