现代移动浏览器的 CSS 媒体查询

Question

我的媒体查询有问题，我想将其定位到手机、平板电脑或计算机。问题是现在有些手机和平板电脑的屏幕分辨率很高。

我似乎找不到合适的组合来实现这一点。你能帮我发布一下你们在网站上使用的查询吗？几天来我一直在研究这些，但无济于事。

我应该为此使用一些 JavaScript 库吗？

更新:

我找到了一个非常好的 jquery 库，它在当今的设备上似乎非常可靠。即使它不再被开发，我发现它成功地检测了所有测试的设备，普通手机和平板电脑，高 ppi 手机和平板电脑，以及台式机或笔记本电脑。试试吧，看看它是否也适合你

Categorizr

Answer 1

没有办法让每个人都开心。对于我们即将推出的响应式网站，我们使用了一些断点

768px1024px1280px1920px - 是我们最大的，我们在这一点上切断

我们在主体上有我们的服务器输出类来检测类(我认为可以用 modernizr 来完成，但从未使用过)，例如，.iphone、android、.mobile、.phone、.tablet因此，如果您使用的是 iphone，我们会得到

.iphone 和 .phone 在 body 标签上

对于某些页面，我们还在 320px 和 480px 处定义了断点

我们对一切都使用 jquery，只是一个警告，jquery 在三星平板电脑上运行相当慢，伙计，我们讨厌那个设备

媒体查询示例(我们使用LESS)

// normal styles

@media only screen and (max-width: @maxTabletWidth) {
   // less than 1024px styles, yes I know 1280px is also tablet
}

@media only screen and (max-width: @maxPhoneWidth) {
   // less than 768px styles
}

祝你好运