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