Question

http://stackoverflow.com这样做，以及www.ancestry.com。如果这些网站没有单独的子域，那么在调整浏览器窗口大小时，这些网站如何避免在桌面上显示移动布局？根据我的理解，媒体查询将根据视口调整网站大小，但StackOverflow和Ancestry只调整到某一点 - 在手机上布局完全不同。对此有何帮助？我想知道像给出的例子这样的网站如何实现这一目标。

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

我最近没有对此进行测试，但有一个“移动”设备说明符：

setTimeout(function () {
    context.drawImage(img,0,0);
    element.classList.add('hide');  // you'll probably like this to be here
}, 17);  // 17ms ~16.667ms as one frame takes @ 60 fps

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

Answer 4

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

html {
  min-width: 1000px;
}

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

Answer 5

我使用＆＃34; mobble pluging＆＃34;在WordPress网站上部署了相同的场景。只需检测设备，然后为移动设备，平板电脑或桌面生成HTML版本。

在调整桌面浏览器大小时，没有显示移动布局的响应式Web设计？

5 个答案: