Окно innerWidth, innerHeight выдает - PullRequest
Новая
       7

Окно innerWidth, innerHeight выдает

0 голосов
/ 22 сентября 2018

Попытка иметь горизонтальные и вертикальные линии на всем экране (в качестве фона).Расстояние между двумя линиями будет 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?

Заранее спасибо, Крис Паппас

* Я не вижу строк в браузере Firefox.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Нашли решение, используя просто css 

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

фонтан: ответ в Как масштабировать изображение SVG, чтобы заполнить окно браузера?

0 голосов
/ 22 сентября 2018

Вы также можете использовать 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 это выглядит намного лучше (по крайней мере, для меня). Дайте мне знать, если он все еще работает для вас.Хорошего дня, Элиас:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...