使用@media(宽度/高度/背景尺寸)缩放时，Safari无法计算正确的Rem单位 [英] Safari doesn't calculate rem units correct when scaling with @media (width/height/background-size)

问题描述

将rem用作CSS中的单位时，缩放在Safari(PC和Mac)中均不起作用.

When using rem as units in css, scaling doesn't really work in Safari (both PC and Mac).

示例位于 http://jsfiddle.net/L25Pz/3/

标记:

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS:

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

在所有浏览器中，当浏览器窗口的宽度大于600px时，...将以275px * 95px的大小呈现图像.另外，触发媒体查询时，图像和背景会将其宽度和高度调整为220px * 76px.

​ ​... renders a image in the size of 275px * 95px when the browser window is wider then 600px - in all browsers. Also, when triggering the media query, the image and the background adjusts it's width and height to 220px * 76px.

但是-使用Safari，宽度和高度设置为247px * 75px.不是* 0.8，还有其他...

BUT - using Safari, the width and height is set to 247px * 75px. Which isn't * 0.8, it's something else...

另一方面，该段落的字体大小可以正确显示:在查询上被钩住时为40px.

The font-size of the paragraph on the other hand is rendered correctly: 40px when hooked on the query.

如果你问我，那很奇怪. 有人有解决方案吗?

Mighty weird if you ask me. Anyone has a solution?

推荐答案

您需要将-webkit-text-size-adjust设置为none，否则Webkit会将字体大小放大到可读的大小:

You need to set -webkit-text-size-adjust to none or else webkit will scale up the font size to a readable size:

@media only screen and (max-width: 500px) {
    html { font-size:50%; -webkit-text-size-adjust:none; }  /* should render everything * 0.8 */  
}

这篇关于使用@media(宽度/高度/背景尺寸)缩放时，Safari无法计算正确的Rem单位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！