Question

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

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

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

任何人都知道如何实现它？

Answer 1

您应该使用max-device-width而不是max-width，它会以视口大小而不是设备屏幕大小为目标。

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

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

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

修改：有关详细信息，请参阅this SO thread。

Answer 2

首先要有两个样式表。一个响应，一个不响应。如果是桌面用户，则加载非响应，反之亦然移动用户

<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

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

2 个答案: