css - 强制响应式网站以特定分辨率呈现

Question

我目前正在开发一个带有多个断点的新响应式网站。在这些断点之间，布局应该是灵活的，以便在每台设备上始终显示得尽可能好。

如果用户使用经典桌面浏览器查看页面，我想强制使用桌面版本的页面并阻止响应。

原因是德国目前缺乏响应式广告。

谁能告诉我如何实现它？

Answer 1

您应该使用 max-device-width 而不是 max-width，它针对的是视口(viewport)尺寸而不是设备屏幕尺寸。

@media only screen and (min-device-width : 1024px) {
   /* Styles */
}

您还可以定位视网膜显示器:

@media only screen and (min-device-pixel-ratio : 1.5) {
   /* Styles */
}

编辑:参见 this SO thread了解更多信息。