如何解决移动设备的媒体查询适用于模拟移动设备,但不适用于我的手机
@media only screen and (hover: none) and (pointer: coarse) {
body {
font-size: 40px;
color: purple; /*added this for debugging */
}
#navbar {
justify-content: center;
}
#nav-left {
display: none;
}
#nav-right {
font-size: 0.75em;
}
#projects {
grid-template-columns: 400px 400px;
grid-template-rows: 400px 400px /*400px 400px*/;
}
.project-wrapper {
height: auto;
width: auto;
pointer-events: none;
cursor: default;
text-decoration: none;
}
.project-tile:hover .project-wrapper {
animation-name: delay_link;
animation-fill-mode: forwards;
animation-duration: 0.7s;
}
@keyframes delay_link {
90% {
pointer-events: none;
}
100% {
pointer-events: auto;
}
}
}
当我在 Chrome DevTools 中模拟移动设备时它会触发。注意文字变成紫色。
但是,如果我在手机上打开该页面,它将无法正常工作。为什么仿真设备与实际设备不同?
我的完整代码:https://codepen.io/julian-sz/pen/vYxOLQx?editors=1101
我的完整代码(调试视图):https://cdpn.io/julian-sz/debug/vYxOLQx/dXkqBaPZYZPM
我的 Chrome 版本:91.0.4472.77(官方版本)(64 位)(群组:91_Win_77)
我在 Android 上的 Chrome 版本(小米 A2 Lite):90.0.4430.210
解决方法
你是否在 head 中添加了元视口?
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。