窗口innerWidth，innerHeight问题

Question

尝试在整个屏幕（背景）中使用水平和垂直线。 两行之间的距离将为3个像素。

代码是：

  <!doctype html>
    <html>
        <head>
            <title>Ζωγραφίζοντας ένα γραφείο</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="StyleSheet" href="style.css" type="text/css" media="screen">
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <!-- svg path for background -->
            <svg width="0" height="0">
                <path d="" stroke="#ccc" stroke-width="1" fill="none"/>
            </svg>
            <section>
            </section>
        </body>
    </html>

    *{
        margin:0;
        padding:0;
    }

    html, body {
        width:100%;
        height: 100%;
    }

    section{
        position:absolute;
        z-index:2;
        top:0px;
        left:0px;
    }

    var svg_1;
    var background_path;
    var window_height,window_width;
    var i;
    var d_for_path="";
    document.addEventListener('DOMContentLoaded', function(){ 
        svg_1 = document.getElementsByTagName("svg")[0];
        background_path = document.getElementsByTagName("path")[0];

        window_height = window.innerHeight;
        window_width = window.innerWidth;

        var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = parseFloat(w.innerWidth) || parseFloat(e.clientWidth) || parseFloat(g.clientWidth),
        y = parseFloat(w.innerHeight) || parseFloat(e.clientHeight)|| parseFloat(g.clientHeight);
        x = x-1;
        y = y-3;

        //make svg_1 as big as possible
        svg_1.setAttribute("width",x+"px");
        svg_1.setAttribute("height",y+"px");

        //draw horizontal lines
        for(i=0;i<=y;i=i+3){
            d_for_path+= "M 0 "+i+",H "+x+",";
        }
        //draw vertical line
        for(i=0;i<=x;i=i+3){
            d_for_path+= "M "+i+" 0,V "+y+",";
        }
        background_path.setAttribute("d",d_for_path);

    }, false);

上面的代码有什么问题？ 为什么必须减少x，y变量？

在此先感谢Chris Pappas

*我在firefox浏览器中看不到这些行。

Answer 1

您也可以使用CSS之类的东西。

 HTML, body { height: 100px; width: 100%; } #small { display: inline-block; height: 100px; width: 100px; background-color: rgb(50, 50, 50); background-image: linear-gradient(rgb(202, 202, 202) 50%, transparent 50%, transparent), linear-gradient(90deg, rgb(202, 202, 202) 50%, transparent 50%, transparent); background-size: 3px 3px; } #big { display: inline-block; height: 100px; width: 100px; background-color: rgb(50, 50, 50); background-image: linear-gradient(rgb(202, 202, 202) 50%, transparent 50%, transparent), linear-gradient(90deg, rgb(202, 202, 202) 50%, transparent 50%, transparent); background-size: 30px 30px; }

 <!doctype html> <html> <head> <title>Site</title> </head> <body> <label>Scale: small</label> <div id="small"></div> <label>Scale: big</label> <div id="big"></div> </body> </html>

是的，它在Google Chrome上看起来更好（至少对我来说），请告诉我它是否仍然对您有用。 祝你有美好的一天，Elias :)

Answer 2

使用CSS找到解决方案

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

喷泉：如何缩放SVG图像以填充浏览器窗口中的答案？

窗口innerWidth，innerHeight问题

问题描述

2 个解决方案

解决方案1
0 2018-09-22 15:08:58

解决方案2
0 已采纳 2018-09-23 18:35:52

窗口innerWidth，innerHeight问题

问题描述

2 个解决方案

解决方案1 0 2018-09-22 15:08:58

解决方案2 0 已采纳 2018-09-23 18:35:52

解决方案1
0 2018-09-22 15:08:58

解决方案2
0 已采纳 2018-09-23 18:35:52