使用 JavaScript/JQuery 在页面加载时将相对/视口大小转换为固定大小答案

【问题标题】：Convert relative/viewport size to fixed size on page load using JavaScript/JQuery使用 JavaScript/JQuery 在页面加载时将相对/视口大小转换为固定大小
【发布时间】：2015-08-10 18:27:23
【问题描述】：

希望你今天过得愉快。我目前正在开发一个网站，其中几乎所有的测量值（字体大小、填充、边距、宽度、高度等）都是使用视口单位 vw 和 vh 进行的。

我使用这些单位是因为它们可以让页面在不同的屏幕分辨率上看起来像我想要的那样，而不像像素大小。

我想知道是否可能，是在页面加载后，获取所有这些测量值的非相对值（例如，如果我说 1vw，而我的屏幕是 1000px，那么非相对值应该是10px）并用这些替换我的css3工作表上的相对值。这听起来可能很荒谬，但我的观点是允许用户放大和缩小页面，并让事物实际放大或缩小。目前，无论用户进行哪种缩放，页面都保持不变，除了我有一个重复的图像。

我想在 javascript 中执行此操作，因为它是我最了解 html 客户端脚本的语言，因为我的 java 起源。

或者，也许有一个我不知道的功能在放大时会简单地忽略相对值？如果有，请告诉我。

【问题讨论】：

该死的，这一定是一个非常困难的问题，甚至还没有猜测：|我会一直等
为什么？您“我使用这些单位是因为它们最能使页面在不同的屏幕分辨率上看起来像我想要的，不像像素大小。”那么，为什么要在页面上更改像素大小 -加载？有什么好处？还是您要解决的问题？因为这真的没有意义。
@DavidThomas 该页面看起来不错，并且可以适应不同的分辨率大小（就像我想要的那样），但它不允许用户放大/缩小。如果用户发现字体太大/太小，他不能改变任何东西的大小，因为它会根据视口调整大小，所以大小会被缩放，一切看起来都一样。

标签： javascript jquery html css viewport-units

【解决方案1】：

应该是这样的（在 Chrome 和 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">
BODY {font-size: 2vw;}
DIV {width: 50vw; height: 66vh; background-color: pink; overflow: hidden;}
H1 {font-size: 200%; font-weight: bold; margin-bottom: -.5vw}
@media screen and (min-width: 500px) {H1 {color: blue;}}
H2 {font-size: 4vmin; font-style: italic;}
P {font-size: 100%; line-height: 1.5em;}
</STYLE>
<SCRIPT>
function fixedSizes()
{
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientheight;
    var units = {vw: w / 100, vh: h / 100, vmin: (w > h ? h : w) / 100, vmax: (w > h ? w : h) / 100};
    var sheet = addSheet();

    for (var s = 0; s < document.styleSheets.length - 1; s++)
    {
        var rules = document.styleSheets[s].cssRules || document.styleSheets[s].rules;

        for (var r = 0; r < rules.length; r++)
        {
            var rule = rules[r];

            if (rule.type == CSSRule.STYLE_RULE)
            {
                var selector = rule.selectorText;
                var styles = rule.style.cssText.match(/[\w-]+\s?:\s?-?[\d\.]+(vw|vh|vmin|vmax)/g);

                for (var t = 0; styles && t < styles.length; t++)
                {
                    var style = styles[t];
                    var prop = style.match(/^[\w-]*/)[0];
                    var unit = style.match(/(vw|vh|vmin|vmax)$/)[0];
                    var val = parseFloat(style.match(/-?[\d\.]+(vw|vh|vmin|vmax)/)[0]) * units[unit];
                    addStyle(sheet, selector, prop + ": " + val + "px");
                }
            }
        }
    }

    function addSheet()
    {
        var s = document.createElement("style");
        s.type = "text/css";
        s.rel = "stylesheet";
        s.media = "screen";
        document.getElementsByTagName("head")[0].appendChild(s);
        return(document.styleSheets[document.styleSheets.length - 1]);
    }

    function addStyle(sheet, selector, style)
    {
        if (sheet.addRule)
        {
            sheet.addRule(selector, style);
        }
        else if (sheet.insertRule)
        {
            sheet.insertRule(selector + " { " + style + " }");
        }
    }       
}

if (CSSRule)
{
    if (document.addEventListener)
    {
        document.addEventListener("DOMContentLoaded", fixedSizes, false);
    }
    else if (window.attachEvent)
    {
        window.attachEvent("onload", fixedSizes);
    }
}
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<H1>Viewport Units</H1>
<H2>Converted to Pixel Values</H2>
<P>Probably the best way to do this for fonts,<BR>is to set the font sizes as percentages,<BR>
   and then have javascript change the BODY font size.</P>
</DIV>
</BODY>
</HTML>

只是为了解释发生了什么：这会检查当前视口大小，然后遍历所有样式表，查找在视口单位中设置了值的属性，将值转换为像素，并将转换后的 css 规则添加到新的附加在其他样式表之后的样式表。

当然，如果只有少数样式需要更新，您可以将它们放在一个单独的样式表中，让脚本只查看这些样式。或者您甚至可以逐字添加样式，例如：

addStyle(document.styleSheets[0], "H1", "font-size: " + w * 0.04 + "px");
addStyle(document.styleSheets[0], "P", "font-size: " + w * 0.02 + "px");

另外，不要在媒体查询中设置任何大小；这会在调整大小和缩放时改变布局。

【讨论】：

嘿，谢谢你的回答，我现在正在测试它。仅供参考：在 html5 上使用 script 标签时，您不再需要声明它是什么类型的脚本，您只需执行 .
所以，我测试了您的代码（顺便说一句，您在最后一个脚本行中缺少“;”），它似乎对我不起作用。我在您的代码末尾放置了一个警报，但它似乎没有触发，所以我猜它没有到达您的函数的末尾。虽然没有错误，所以可能是我还没有得到的逻辑错误。你能上传一个演示吗？
糟糕，我忘记在使用“styles.length”之前测试“styles”是否存在；我可能后来改了css，这就是为什么一开始没有出现这个错误。
为了浏览器的兼容性，我稍微调整了脚本。但是，我发现例如IE8 完全丢弃了它不理解的 css 规则（比如那些带有视口单元的规则），因此它们在 document.styleSheets 界面中丢失了。所以尝试让这个脚本在 IE8 老式浏览器上工作没有多大意义。我不知道这对你是否重要。您可以通过首先设置一个合理的像素值来为旧版浏览器提供备用方案，例如“P {font-size: 16px; font-size: 2vh}”。
好吧，这对我来说并没有真正起作用，但对于将来尝试这样做的人来说，这似乎是一个很好的脚本，所以我将其标记为正确答案，并会找到一些解决问题。（我可能会改变我网站的工作方式，因为它现在有点令人困惑）。