3

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

我似乎找不到合适的组合来实现这一目标。你能帮我发布你们用于网站的查询吗？这几天我一直在研究这些，没有用。

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

更新：

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

分类

4

3 回答 3

3

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

768px 1024px 1280px 1920px - 是我们最大的，我们在这一点上切断

我们在 body 上有我们的服务器输出类来检测类（我认为可以用 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
}

祝你好运

于 2013-07-18T19:09:27.993 回答
2

Having built quite a few responsive websites, I find that instead of specifying 'x' width for a desktop monitor, 'y' width for a tablet, and 'z' width for a mobile; it's better to use breakpoints to ensure your site works across all browser sizes.

That said, a good site to look at if you're interested in various screen sizes is screensiz.es, where you can see popularity stats as well as their physical pixel widths.

Being device agnostic means that you won't have to readapt designs, and builds when Apple, or Samsung release their super thin, or super chunky devices.

A final suggestion to aid the functionality on the variety of devices would be to employ something like Modernizr to detect touch events.

Hope that helps.

于 2013-07-19T14:03:47.633 回答
0

我想知道您是否使用了正确的工具来完成这项工作。响应式设计让您停止尝试针对特定设备或猜测下一款 iPad/智能手机的细节。

设置断点以管理不同视口的设计布局，您已完成 90% ;)

于 2013-07-20T18:25:12.790 回答