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

时间:2015-06-01 20:29:16

标签: html css media-queries

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

5 个答案:

答案 0 :(得分:0)

我应该把它作为评论,但是他们会查看设备宽度,而不是媒体查询和javascript中的视口宽度。 (我病了,不想再写了)。还有一些服务可以帮助您检测有哪种类型的设备。但是,这些服务有时可能会很慢而且很昂贵。通常不值得努力。

答案 1 :(得分:0)

您可以检测您的查看器是移动设备还是PC,然后加载不同的CCS文件。

您可以通过javascript UserAgent检测是否有移动设备的一种方式,但它不是非常有效。

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

html {
  min-width: 1000px;
}

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

答案 4 :(得分:0)

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