gpt4 book ai didi

html - 极其基本的媒体查询不适用于移动设备

转载 作者:太空宇宙 更新时间:2023-11-04 06:17:53 25 4
gpt4 key购买 nike

这让我难住了。这在浏览器(经过测试的 Chrome、Firefox 和 Safari)中运行良好,但在 Chrome 模拟器、Chrome 移动版或 Firefox 移动版中不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}

@media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>

我原来的问题更复杂,但即使将其简化为最简单的形式也没有用。尝试了以上不同的组合,例如 display: inline-block; 而不是 float: left;,不同的视口(viewport)元标记,添加 only screen到媒体查询,除普通 div 之外的其他标签,等等。

我最初的问题是在使用 Web Components + ShadowDOM 时出现的,但它似乎与那些无关。确保在测试时破坏我所有的缓存。

我要疯了吗?

最佳答案

哦,我很笨。元标记中有错字。应该是 name 而不是 title:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

关于html - 极其基本的媒体查询不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55778467/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com