Question

我试图创建一个iframe来模拟iphone屏幕，但我遇到了使字体大小与iframe大小（高x宽）成比例的问题。我把320x480用于测试。

任何人都知道我该怎么做？

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script type="text/javascript">
        function makeIframe() {
            var content = "<!DOCTYPE html><html lang='en'><head><meta name=" +  
                + "'viewport' content='width=320, height=480, initial-scale=0.5,"
                     + "maximum-scale=0.5," + 
                " minimum-scale=0.5, user-scalable=no' /></head><body>" +
                "<h1>Test</h1></body></html>";
            alert('content >> ' + content);  
            var iframe = document.createElement("iframe");
            // iphone 4
            iframe.height = 480;
            iframe.width = 320;         
            document.body.appendChild(iframe);
            iframe.contentWindow.document.open('text/htmlreplace');
            iframe.contentWindow.document.write(content);
            iframe.contentWindow.document.close();
            alert('2'); 
        }
    </script>
</head>
<body>
    <div id="body"></div>
    <input type="button" onclick="makeIframe()" value="Make" />
</body>
</html>

Answer 1

也许你可以尝试在你的身体标签中使用em：

<body style='font-size: 0.2em'>

然后所有字体大小的body标签都会很小。

JS小提琴链接：http://jsfiddle.net/nq0hdxae/

将字体大小与iframe大小成比例

1 个答案: