问题详细信息在这里
segmentfault.com 你问 AI 都得不到好答案的问题：
前端 CSS 媒体查询怎么区分是使用电脑浏览器还是手机浏览器？
例如需求为：
移动端设备（手机、ipad 等）导航栏显示为底部 Tabs
电脑端设备导航栏显示为头部 Tabs
.
.
.
.
答案是使用
@media (hover: hover) {}
其本质上是区分输入设备是否为鼠标，这覆盖了绝大多数电脑跟手机的区分场景，上面场景的设置如下：
// 电脑端
@media (hover: hover) {
.nav { position: fixed; top: 0; left:0 width:100vw, height: 10rem }
}
// 移动端
.nav { position: fixed; bottom: 0; left:0 width:100vw, height: 10rem }
前端 CSS 媒体查询怎么区分是使用电脑浏览器还是手机浏览器？
例如需求为：
移动端设备（手机、ipad 等）导航栏显示为底部 Tabs
电脑端设备导航栏显示为头部 Tabs
.
.
.
.
答案是使用
@media (hover: hover) {}
其本质上是区分输入设备是否为鼠标，这覆盖了绝大多数电脑跟手机的区分场景，上面场景的设置如下：
// 电脑端
@media (hover: hover) {
.nav { position: fixed; top: 0; left:0 width:100vw, height: 10rem }
}
// 移动端
.nav { position: fixed; bottom: 0; left:0 width:100vw, height: 10rem }
展开
5
1