更新：

Question

我的媒体查询存在问题，我想定位手机，平板电脑或计算机。问题是今天一些手机和平板电脑的屏幕分辨率很高。

我似乎找不到合适的组合来实现这一目标。你能帮助我并发布你们为你的网站使用的查询吗？我已经在这些工作了几天，但没有用。

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

更新：

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

Categorizr

Answer 1

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

768px 1,024像素 1280px 1920px - 是我们最大的，我们此时切断了

我们在主体上有我们的服务器输出类来检测类（可以使用modernizr我认为，从未使用它），例如.iphone，android，.mobile，.phone，.tablet 因此，如果您使用的是iPhone，我们会得到

身体标签上的

.iphone和.phone

对于某些页面，我们还定义了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
}

祝你好运

Answer 2

建立了相当多的响应式网站后，我发现不是为桌面显示器指定'x'宽度，而是为平板电脑指定'y'宽度，为移动设备指定'z'宽度;最好使用断点来确保您的网站适用于所有浏览器尺寸。

也就是说，如果您对各种屏幕尺寸感兴趣，可以查看一个很好的网站screensiz.es，您可以在其中查看热门统计信息以及实际像素宽度。

与设备无关意味着您不必重新设计，并在Apple或三星发布其超薄或超大型设备时进行构建。

有助于各种设备功能的最终建议是使用类似Modernizr的内容来检测触摸事件。

希望有所帮助。

Answer 3

我想知道你是否正在使用合适的工具。响应式设计让您可以停止尝试定位特定设备或猜测下一个iPad /智能手机的具体细节。

设置断点以管理不同视口的设计布局，您完成了90％;）

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

更新：

3 个答案: