当缩放级别未设置为 100% 时，桌面 IE10 似乎无法正确缩放以视口(viewport)单位设置字体大小的文本。我试图找出哪些 IE 版本(可能还有其他浏览器)受此影响。 请在您的浏览器中尝试此示例并报告您的发现:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0">
<STYLE TYPE="text/css">
DIV:first-of-type {width: 32px; height: 32px; background-color: blue;}
DIV:last-of-type {width: 3.125vw; height: 3.12vw; background-color: red;}
P:first-of-type {font-size: 32px;}
P {font-size: 3.125vw;}
P:last-of-type {font-size: 16px;}
@-webkit-viewport {width: device-width; zoom: 1.0;}
@-moz-viewport {width: device-width; zoom: 1.0;}
@-ms-viewport {width: device-width; zoom: 1.0;}
@-o-viewport {width: device-width; zoom: 1.0;}
@viewport {width: device-width; zoom: 1.0;}
</STYLE>
</HEAD>
<BODY>
<DIV></DIV>
<P>font-size: 32px</P>
<DIV></DIV>
<P>font-size: 3.12vw</P>
<P>Resize the window to see the expected behaviour.<BR>
Zoom in/out to see IE's erratic behaviour:<BR>
the DIV adapts to the new viewport width,<BR>
but the font size doesn't.</P>
</BODY>
</HTML>
最佳答案
这是一个简单的解决方法:字体大小以百分比设置，调整大小触发的脚本根据正文宽度设置正文字体大小。
但是，我仍然想知道我需要为哪些浏览器和版本启用此解决方法。请尝试问题中的示例，并报告您的平台、浏览器、版本以及在调整和缩放窗口时观察到的行为。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0">
<STYLE TYPE="text/css">
BODY {font-size: 16px;}
DIV:first-of-type {width: 32px; height: 32px; background-color: blue;}
DIV:last-of-type {width: 3.12vw; height: 3.12vw; background-color: red;}
P:first-of-type {font-size: 32px;}
P:last-of-type {font-size: 200%;}
@-webkit-viewport {width: device-width; zoom: 1.0;}
@-moz-viewport {width: device-width; zoom: 1.0;}
@-ms-viewport {width: device-width; zoom: 1.0;}
@-o-viewport {width: device-width; zoom: 1.0;}
@viewport {width: device-width; zoom: 1.0;}
</STYLE>
<SCRIPT>
function addEvent(el, ev, eh, el2, ev2, eh2)
{
if (el.addEventListener)
{
el.addEventListener(ev, eh, false);
}
else if ((el2 || el).attachEvent)
{
(el2 || el).attachEvent("on" + (ev2 || ev), eh2 || eh);
}
}
function fontSizeFix()
{
/* if (navigator.userAgent.search(/\bMSIE\s(9\.|10\.).*\bWindows\s(?!(CE|Phone))/i) > -1) */
{
if (document.body)
{
addEvent(window, "resize", textSize);
textSize();
}
else
{
addEvent(document, "DOMContentLoaded", fontSizeFix, window, "load");
}
}
function textSize()
{
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
document.body.style.fontSize = 1.6 * w / 100 + "px";
}
}
fontSizeFix();
</SCRIPT>
</HEAD>
<BODY>
<DIV></DIV>
<P>font-size: 32px</P>
<DIV></DIV>
<P>font-size: 200%</P>
</BODY>
</HTML>
关于css - 视口(viewport)单位字体大小和缩放错误 : which browsers are affected?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30280345/