Как я могу определить размер окна/браузера с помощью jQuery, например Gmail? В Gmail нам не нужно обновлять или перезагружать текущую страницу, как только мы изменили разрешение окна в настройках окна? В моем проекте мне нужно обновить браузер, как только изменится настройка окна.
Любая идея будет оценена.
Вы не можете найти разрешение экрана с веб-страницы. Для него есть запрос 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, вероятно, использует комбинацию из всех этих.
Вы делаете один 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>Вы можете получить значения для ширины и высоты браузера, используя следующее:
$(window).height();
$(window).width();
Чтобы получить уведомление при изменении размера браузера, используйте этот обратный вызов привязки:
$(window).resize(function() {
// Do something
});
Вы хотите определить, когда изменилось окно?
Вы можете использовать JQuery resize для прикрепления обработчика.
//get dimensions
var height = $(window).height();
var width = $(window).width();
//refresh on resize
$(window).resize(function() {
location.reload(true)
});
Не уверен, хотите ли вы возиться с размерами элементов или фактически обновлять страницу. поэтому здесь куча разных вещей выбирает то, что вы хотите. вы даже можете поместить высоту и ширину в событие изменения размера, если хотите.
Вы также можете использовать простой Javascript window.innerWidth для сравнения ширины.
Но используйте jQuery .resize() автоматически для вас:
$( window ).resize(function() {
// your code...
});