时间戳

首页 > 解决方案 > 非常基本的媒体查询不适用于移动设备

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

问题描述

这让我很难过。这在浏览器（经过测试的 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;，不同的视口元标记，添加only screen到媒体查询，除普通divs 之外的其他标记等。

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

我要疯了吗？

标签： htmlcssmedia-queries

解决方案

哦，哇，我傻了。元标记中有错字。应该name代替title：

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

推荐阅读