Как определить размер окна с помощью jQuery?

Ответ 1

Вы не можете найти разрешение экрана с веб-страницы. Для него есть запрос CSS Media Queries, но он плохо реализован в большинстве устройств и браузеров, если вообще. Однако вам не нужно знать разрешение дисплея, так как его изменение меняет ширину окна (пикселя), которое может быть обнаружено с помощью методов, описанных другими:

$(window).resize(function() {
  // This will execute whenever the window is resized
  $(window).height(); // New height
  $(window).width(); // New width
});

Вы также можете использовать CSS Media Queries в браузерах, которые поддерживают их, чтобы адаптировать стиль вашей страницы к различным ширинам экрана, но вы действительно должны использовать em единицы измерения и проценты и min-width и max-width в своем CSS, если вы требуется правильная гибкая компоновка. Gmail, вероятно, использует комбинацию из всех этих.

Ответ 2

Вы делаете один div где-то на странице и помещаете этот код:

<div id="winSize"></div>
<script>
    var WindowsSize=function(){
        var h=$(window).height(),
            w=$(window).width();
        $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>");
    };
   $(document).ready(WindowsSize); 
   $(window).resize(WindowsSize); 
</script>

Вот фрагмент:

var WindowsSize=function(){
    	var h=$(window).height(),
    		w=$(window).width();
    	$("#winSize").html("<p>Width: "+w+"<br>Height:"+h+"</p>");
 };
 $(document).ready(WindowsSize); 
 $(window).resize(WindowsSize); 

#winSize{
  position:fixed;
  bottom:1%;
  right:1%;
  border:rgba(0,0,0,0.8) 3px solid;
  background:rgba(0,0,0,0.6);
  padding:5px 10px;
  color:#fff;
  text-shadow:#000 1px 1px 1px,#000 -1px 1px 1px;
  z-index:9999
}

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

Ответ 3

Вы можете получить значения для ширины и высоты браузера, используя следующее:

$(window).height();
$(window).width();

Чтобы получить уведомление при изменении размера браузера, используйте этот обратный вызов привязки:

$(window).resize(function() {
    // Do something
});

Ответ 4

Вы хотите определить, когда изменилось окно?

Вы можете использовать JQuery resize для прикрепления обработчика.

Ответ 5

//get dimensions 
var height = $(window).height();
var width = $(window).width();

//refresh on resize
$(window).resize(function() {
  location.reload(true)
});

Не уверен, хотите ли вы возиться с размерами элементов или фактически обновлять страницу. поэтому здесь куча разных вещей выбирает то, что вы хотите. вы даже можете поместить высоту и ширину в событие изменения размера, если хотите.

Ответ 6

Вы также можете использовать простой Javascript window.innerWidth для сравнения ширины.

Но используйте jQuery .resize() автоматически для вас:

$( window ).resize(function() {
  // your code...
}); 

http://api.jquery.com/resize/