html - 针对 1024px 但在桌面和平板电脑上显示不同的媒体查询？可能的？

Question

我正在使用标准媒体查询以像素为单位定位各种断点(例如@media screen and (min-width:768px) and (max-width:1024px))，但我被要求显示不同的布局1024px 的台式机和相同 1024px 宽度的平板电脑。

这可能吗？据我所知，它不是，但我想我会在这里得到建议以确保。

谢谢 :)

Answer 1

你不能在纯 media query CSS 中做你想做的事.基本上，您可以将平板电脑定位到屏幕尺寸之外:

触控支持

CSS4 为媒体查询提供了一个新的触摸选项。由于这没有得到非常广泛的支持，但您可以使用 Modernizr。它会在“touch”或“no-touch”的根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
}

注意 - 我没有使用解析方法，需要测试。