响应式网页设计在调整桌面浏览器大小时不显示移动布局？

Question

http://whosebug.com 和 www.ancestry.com 一样。如果这些网站没有单独的子域，那么在调整浏览器 window 大小时，这些网站如何避免在桌面上显示移动布局？据我了解，媒体查询会根据视口调整网站大小，但 Whosebug 和 Ancestry 都只会调整到某个点 - 在 phone 上布局完全不同。有什么帮助吗？我想知道像给出的示例这样的网站是如何实现这一目标的。

Answer 1

我可能应该对此发表评论，但他们在媒体查询和 javascript 中查看设备宽度，而不是视口宽度。（我病了，不想再写了）。还有一些服务可以帮助您检测设备的类型。然而，这些服务有时会很慢而且很贵。更多的时候是不值得的。

Answer 2

您可以检测您的查看器是手机还是 PC，然后加载不同的 CCS 文件。

检测是否有手机的一种方法是 javascript UserAgent，但它不是很有效。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // is mobile..
}

Answer 3

我最近没有测试过，但是有一个 'mobile' 设备说明符：

@media mobile and (min-width: 400px) {
  .col { width:50% }
}

@media mobile and (max-width: 400px) {
  .col { width:100% }
}

这适用于移动设备，但不适用于桌面设备

Answer 4

从技术上讲，它是通过在您的文档上强制使用 min-width 来完成的，这将导致水平滚动低于该大小，其中：

html {
  min-width: 1000px;
}

但是，如果您可以 100% 保证此站点仅提供给桌面设备，则您应该只提供此类 CSS。这不适用于移动设备。如果用户调整 window 的大小，在桌面上显示移动布局是完全正常的。自然适应分屏模式情况

Answer 5

我使用 "mobble pluging" 在 WordPress 网站上部署了相同的场景，它只是检测设备，然后为移动设备、平板电脑或台式机生成 HTML 版本。

响应式网页设计在调整桌面浏览器大小时不显示移动布局？

Responsive Web Design without showing mobile layout when resizing desktop browser?

html

css

media-queries