Viewport-unit font-size and zooming bug: which bro

2019-02-26 04:22发布

站内问答 / CSS3
840 1 6

It seems that desktop IE10 doesn't correctly scale text that has its font size set in viewport units, when the zoom level is not set to 100%. I'm trying to find out which IE versions (and possibly other browsers) are affected by this. Please try this example in your browser and report your findings:

<!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>

1条回答
▲ chillily
2楼-- · 2019-02-26 04:51

This is a simple workaround: the font sizes are set in percentages, and a resize-triggered script sets the body font size according to the body width.
However, I'd still like to know which browsers and versions I need to enable this workaround for. Please try out the example in the question, and report your platform, browser, version, and the observed behaviour when resizing and zooming the window.

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)