CSS媒体查询在DPI缩放的断点处无法在Firefox和Chrome中运行

时间：2017-06-02 04:39:46

标签： css google-chrome firefox media-queries dpi

我遇到的问题是CSS媒体查询在“边界线”情况下无法正常工作。下面是另一个演示问题的线程（CSS Media Queries not working in Firefox and Chrome）中列出的示例代码。 Internet Explorer和Edge都可以正常使用此示例代码。

在屏幕宽度 641px 时，示例页面显示：
Firefox：“个人资料”Chrome：“平板电脑资料”

在屏幕宽度 991px 时，示例页面显示：
 Firefox：“个人资料”Chrome：“个人资料”

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
  @media (min-width: 0) and (max-width: 640px) {
      h1::before {content: 'Phone ';}
  }
  @media (min-width: 641px) and (max-width: 991px) {
      h1::before {content: 'Tablet ';}
  }
  @media (min-width: 992px) {
      h1::before {content: 'Desktop ';}
  }
</style>
</head>

<body>
  <h1>Profile</h1>
</body>
</html>

enter image description here



**** ****更新：

经过进一步测试后，问题似乎来自Windows显示设置下的“缩放和布局”设置。 Windows有125％作为建议的缩放值，这就是我设置的内容。当我将此设置更改回100％时，问题就会消失。

为了其他任何有此问题的人的利益，我终于发现了这个问题： https://github.com/twbs/bootstrap/issues/19197

0 个答案:

没有答案
相关问题
最新问题