Question

我的布局基于rem，最近我注意到Safari（台式机和移动设备）仅缩放字体大小，而没有其他元素。具体来说，它将在第一个媒体查询中缩放元素。

在Chrome和Firefox中一切正常。

HTML

<h1>Hello Circle</h1>
<div class="circle"></div>

CSS

html,
body {
  font-size: 62.5%;
  background-color: red;
}

@media (max-width: 900px) {
  html,
  body {
    font-size: 50%;
    background-color: green;
  }
}

@media (max-width: 579px) {
  html,
  body {
    font-size: 30%;
    background-color: blue;
  }
}

.circle {
  width: 20rem;
  height: 20rem;
  background-color: yellow;
  border-radius: 50%;
}

h1 {
  font-size: 3rem;
}

提琴：http://jsfiddle.net/ew97d4rj（每个MQ的黄色圆圈都会变小，就像文本一样，但是在Safari中，最小的MQ圆圈不会缩小。）

我猜媒体查询有问题，因为如果我使用下面的MQ，它可以工作，但是由于正常尺寸仅在579px至700px之间使用，因此我的布局出现了问题。

html,
body {
  font-size: 62.5%;
  background-color: red;
}

@media (max-width: 579px) {
  html,
  body {
    font-size: 30%;
    background-color: green;
  }
}

@media (min-width: 700px) {
  html,
  body {
    font-size: 90%;
    background-color: blue;
  }
}

Answer 1

在head标签中使用meta。 ?attr/actionBarSize

，然后使用像这样的CSS媒体查询和font-size仅适用于body标签，而不适用于html @media only屏幕和（最大宽度：900px）{

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

}

Answer 2

我现在非常确定，这是一个 Safari最小字体大小问题，与媒体查询无关。如果我使用字体大小为200％/ 150/100％的媒体查询，则它的工作方式为“精细”。当我寻找解决方案时，我发现该解决方案可以使用-webkit-text-size-adjust: none，但似乎不再受支持。至少，它没有作用。另外，我的假设是文本缩放比例是错误的。它仅缩放Safari设置的最小字体大小。

我在计算机上使用Safari 10.1，在手机上使用Safari 11。

媒体查询问题：Safari无法缩放REM中的元素

2 个答案: