Размер окна браузера (не экрана)

[Ubhra]

Для контроля ширины блоков использую медиа запросы в CSS.

Они отлично определяют разрешение экрана, но как без js узнать размер окна браузера?

 

P.S. Причем если менять размер размер окна десктопного браузера, то запросы @media screen работают идеально. Мобильный браузер пытаясь имитировать десктопный, уменьшает все так, что шрифт не разобрать. Пытался с помощью (<meta name="viewport" content="width=device-width, initial-scale=1">) исправить, оно просто скалирует не влияя на размер блоков.

Edited November 23, 2017 by Ubhra

[klierik]

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

С этим будет так: http://take.ms/sb8I6

[klierik]

Для каких целей?

[Ubhra]

4 минуты назад, klierik сказал:

Для каких целей?

Для мобильного.

Т.е. если сайт просматривается на мобильном, что бы можно было управлять отображением блоков.

Меняю размер только двух блоков, в зависимости от экрана. Беру десктопный браузер за край и "елозю" меняя размер, все работает (особенно с display:flex; замечальные эффекты).

Скрытый текст

@media screen and (min-width:320px) and (max-width:359px){
    body, footer{
        width:320px;
    }
}
@media screen and (min-width:360px) and (max-width:399px){
    body, footer{
        width:360px;
    }
}
@media screen and (min-width:400px) and (max-width:479px){
    body, footer{
        width:400px;
    }
}
@media screen and (min-width:480px) and (max-width:539px){
    body, footer{
        width:480px;
    }
}
@media screen and (min-width:540px) and (max-width:639px){
    body, footer{
        width:540px;
    }
}
@media screen and (min-width:640px) and (max-width:719px){
    body, footer{
        width:640px;
    }
}
@media screen and (min-width:720px) and (max-width:799px){
    body, footer{
        width:720px;
    }
}
@media screen and (min-width:800px) and (max-width:899px){
    body, footer{
        width:800px;
    }
}
@media screen and (min-width:900px) and (max-width:959px){
    body, footer{
        width:900px;
    }
}
@media screen and (min-width:960px) and (max-width:1023px){
    body, footer{
        width:960px;
    }
}
@media screen and (min-width:1024px) and (max-width:1279px){
    body, footer{
        width:1000px;
    }
}
@media screen and (min-width:1280px) and (max-width:1439px){
    body, footer{
        width:1200px;
    }
}
@media screen and (min-width:1440px) and (max-width:1599px){
    body, footer{
        width:1400px;
    }
}
@media screen and (min-width:1600px){
    body, footer{
        width:1500px;
    }
}

 

[klierik]

На реальном устройстве, скорее всего, этих проблем не будет. Хотя я не совсем понимаю саму проблему, так как никакого масштабирования быть не должно. Что-то желаешь не так, а что — не знаю.

[Ubhra]

В том то и дело. На реальом устройстве медиа запросы не работают.

Почему то в десктопе определяются именно размеры окна браузера, а мобильник отображает сайт как для экрана 1080px при реальных 360px.

В js за это отвечают screen.width и document.body.clientHeight, один запрос на ширину экрана, второй на ширину браузера.

 

Скрытый текст

 

Вот посмотрите пожалуйста, что не так?

http://test.introdump.net/

Edited November 23, 2017 by Ubhra

[Ubhra]

Спасибо!Оно самое.