针对1024px的媒体查询，但桌面和平板电脑的显示方式有所不同？可能？

Question

我正在使用标准媒体查询以像素为单位定位各种断点（例如@media屏幕和（最小宽度：768px）和（最大宽度：1024px））但我被要求显示不同的布局1024px的桌面和不同的平板电脑，宽度相同的1024px。

这甚至可能吗？据我所知，事实并非如此，但我想我会在这里得到建议以确保。

谢谢:)

Answer 1

你无法在纯media query CSS中做你想做的事。基本上，您可以将平板电脑定位到屏幕尺寸以外：

触摸支持

CSS4为媒体查询提供了新的触控选项。由于目前尚未广泛支持，您可以使用Modernizr。它会在“触摸”或“无触摸”的根html中添加一个类。然后，您可以使用它来定位触摸设备。例如：

html.touch .someToolbar {display: none;}  //hides toolbar on touch devices

用户代理

使用javascript检测用户代理并加载相应的css，或者只是在样式变小时进行样式更改

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { /* do tablet/mobile specific things */}

解决

如果您想定位specific screen size。例如，我希望任何人使用11英寸或更小屏幕运行1024

@media 
    only screen and (oriantation: landscape) and (device-width: 1024px) and ( min-resolution: 116dpi),
    only screen and (oriantation: portrait) and (device-height: 1024px) and ( min-resolution: 116dpi), {
   //targets specifically 1024 width with screen size 10 inch or smaller
}

注意 - 我没有使用分辨率方法，需要进行测试。

Answer 2

回答你的问题：是的，这是可能的。 Checkout Bootstrap 3.已经准备好了已经出现的模型，平板电脑和桌面媒体查询。除非您愿意，否则无需进行任何自定义。