针对1024px的媒体查询，但桌面和平板电脑的显示方式不同？可能？-Java 学习之路

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

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

谢谢：）

2 回答

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

Touch Support

CSS4为媒体查询提供了新的触摸选项 . 由于目前尚未广泛支持，您可以使用Modernizr . 它会在“触摸”或“无触摸”的根html中添加一个类 . 然后，您可以使用它来定位触摸设备 . 例：
```
html.touch .someToolbar {display: none;}  //hides toolbar on touch devices
```
User Agent

使用javascript检测用户代理并加载适当的css，或者只是在样式很小的情况下更改样式
```
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { /* do tablet/mobile specific things */}
```
Resolution

如果你想定位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
}
```
注 - 我没有使用分辨率方法，需要进行测试 .
回复于 2024-05-03T04:26:29+08:00
1

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

回复于 2024-05-03T04:26:29+08:00