css - 像 Apple 一样防止在桌面上移动

Question

我有一个问题，我已经搜索了几个小时，但找不到解决我的问题的方法。我正在努力做到这一点，因此当您调整浏览器大小时，移动版本和断点不会在桌面上显示。因此，当您在桌面上时，您应该能够将浏览器的大小调整到您必须水平滚动的程度，而不是同时显示桌面和移动版本。 apple.com当您调整浏览器大小时，它会变得很小并且您永远看不到移动版本。你不应该因为你在桌面上。

这是网站: http://www.avrs.com/

要重现问题，您可以调整浏览器的大小，在大约 1000 像素时它会损坏并且很难看。你也可能会说我做的 display: none; 错了欢迎你告诉我如何修复。

我也很熟悉 http://getbootstrap.com/css/#responsive-utilities .但他们似乎也没有解决这个问题。

Answer 1

有几种技术可以实现您想要的效果。最简单的方法是使用具有特定属性的 CSS 媒体查询。

通常 min-width 或 max-width 用于 CSS 断点以使您的网站适合移动设备(响应式网页设计) .如果您想在桌面浏览器上避免这种情况，您可以使用具有特定于移动设备的值的不同属性:

• 最小设备像素比
• 最小设备宽度
• 方向

此来源将提供更多相关信息:article on css-tricks .

另一个问题是:为什么您想让您的网站像那样没有响应且不友好？在 2014 年，我(以及几乎大多数用户)希望网站适应浏览器的窗口大小。

场景:我非常喜欢在屏幕的一半上使用浏览器浏览网站，例如。在另一半与某人聊天或看电影。

考虑这一点。我认为最好改进您的网站，使其在所有不同的分辨率下都能很好地工作，因为您不能永远不要假设您的用户和他们的设备(智能手机、平板电脑、上网本、笔记本电脑、台式机……)。如今，我可以轻松获得比台式电脑分辨率更高的智能手机，或者带触摸屏的笔记本电脑。