Получить ширину экрана и зафиксировать его до фиксированного размера

Question

Я хочу получить размер экрана, и если после этого размер браузера изменится, его не следует менять на новую ширину браузера. Как я могу это сделать через CSS? Или jQuery?

Если я загружаю веб-страницу в свой браузер, а текущая ширина экрана составляет 1000 пикселей, после этого я изменил размер моего веб-браузера, который эквивалентен ширине 700 пикселей. Но моя ширина навигатора должна быть 1000 пикселей; его нельзя изменять. Это мое требование.

Answer 1

$(document).ready(function() { 
 
    var windowWidth = $(window).width(); 
 
    $('#navbar').width(windowWidth); 
 
});

#navbar { 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar">Some Content</div>

Вы должны убедиться, что вы установите ширину навигационной панели в пикселях СЭМ. Если вы установите его в процентах, то он всегда будет изменяться, если изменится ширина его родителя (который я принимаю - тело). Если он установлен в пикселях или ems, тогда его ширина будет статичной, если код не изменит ее снова.

Здесь в основном то, что вам нужно, если идентификатор вашего навигатора navbar. Я устанавливаю его в документе, чтобы он был установлен только один раз, когда навигационная панель, несомненно, будет доступна, но может быть лучше, чтобы установить ее, в зависимости от ваших конкретных обстоятельств.

Редактировать: Я добавил фрагмент кода, который показывает, что ширина навигационной панели НЕ изменяется при изменении размера экрана. Он устанавливается только в готовом событии, а затем никогда не изменяется.

Answer 2

Попробуйте установить родительский элемент width по желаемой ширине; например, 100%; установка nav ширина до width:calc(100%).

Также можно добавить событие resize к window, чтобы поддерживать ширину nav при первоначально загруженной ширине видового экрана.

$(function() { 
 
    var width = window.innerWidth; 
 
    var nav = $("nav"); 
 
    
 
    $(window).on("resize", function() { 
 
    nav.width(width) 
 
    }) 
 
    
 
});

body { 
 
    width:100%; 
 
} 
 

 
nav { 
 
    width:calc(100%); 
 
    height:24px; 
 
    top:0px; 
 
    background:navy; 
 
    color:orange; 
 
    text-align:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<nav>nav</nav>

Answer 3

@media screen and (max-width:1000) and (min-width:700){ 
    background-color:red; 
} 
@media screen and (max-width:699){ 
    background-color:green; 
}