Html 极其基本的媒体查询在手机上不起作用_Html_Css_Media Queries

Html 极其基本的媒体查询在手机上不起作用

html css

Html 极其基本的媒体查询在手机上不起作用,html,css,media-queries,Html,Css,Media Queries,这把我难住了。这在浏览器（经过测试的Chrome、Firefox和Safari）中运行良好，但在Chrome emulator、Chrome mobile或Firefox mobile中不起作用 <!DOCTYPE html> <html lang="en"> <head> <meta title="viewport" content="width=device-width, initial-scale=1.0"> <style>

这把我难住了。这在浏览器（经过测试的Chrome、Firefox和Safari）中运行良好，但在Chrome emulator、Chrome mobile或Firefox mobile中不起作用

<!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>


div{
宽度：50%；
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：500px）{
div{
宽度：100%；
}
}
左边
赖特

我最初的问题更复杂，但即使把它归结为最简单的形式，它也不起作用。使用不同的组合尝试上述操作，例如

display:inline块而不是浮动：左
，不同的视口元标记，将仅屏幕
添加到媒体查询，除普通div
s以外的其他标记，等等
我最初的问题是在使用Web组件+ShadowDOM时出现的，但它似乎与这些组件无关。测试时一定要把我所有的缓存都弄坏
我快发疯了吗？
哦，哇，我真傻。元标记中有一个输入错误。应该是name
而不是title
：
<meta name="viewport" content="width=device-width, initial-scale=1.0">


您尝试过900px以外的值吗？尝试在“媒体”和最大宽度之间放置“和”。此外，样式应该真正在头部（或链接为css），只是尝试了500px，添加了
到
，并在介质和最大宽度之间添加了屏幕和
。不走运。将用新代码更新我的帖子。@Kevin您使用哪个移动设备测试chrome浏览器？现在很多都比900宽。例如，我的是1440。。quirktools工具通常与设备大小保持同步。。值得一试吗？你的测试方式一定有问题。它起作用了。可能不相关，但请确保您的缩放级别为100%
。