Как мне получить windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, pageX, pageY, <50722750>, который будет работать все основные браузеры?
Получить размер экрана, текущую веб-страницу и окно браузера
turtledove
9 августа 2010 в 06:28
1819079
20
Ответы (20)
Ankit Jaiswal
9 августа 2010 в 06:39
Вы можете получить размер окна или документа с помощью jQuery:
// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();
Для размера экрана вы можете использовать объект screen:
window.screen.height;
window.screen.width;
10 августа 2010 в 02:25
спасибо, а есть ли способ получить pageX, pageY, screenX, screenY?
6 февраля 2013 в 16:02
Кажется, что метод jQuery height () работает для всех элементов и возвращает число (46), а не строку вроде css ('height') ("46px").
19 июня 2013 в 17:10
К сожалению, при работе с мобильным Safari jQuery не является идеальным решением этого вопроса. См. Примечание к строке 13 по адресу github.com/jquery/jquery/blob/master/src/dimensions.js
26 января 2014 в 21:52
@turtledove, конечно, цепляйтесь вместе. Req jQuery: $ (document) .ready (function () {var window_height = $ (this). (Window) .height () + "px"; var sizes = $ ("body"). Css ("height", window_height); var window_width = $ (this). (window) .width () + "px"; var sizes = $ ("body"). css ("width", window_width);})
28 января 2014 в 15:31
@ 웃 웃웃 웃웃 что ты отредактировал в ответе? по ревизиям вы вообще ничего не редактировали
14 апреля 2014 в 04:43
@mrplants Это все в пикселях.
30 января 2015 в 09:49
screen.height - в браузере Android по умолчанию получает одно значение, в браузере Android Chrome - другое значение. Я думаю, в хроме высота делится на соотношение пикселей. Например, если высота равна 800, а соотношение пикселей - 1,5, то для хрома это 800 / 1,5 = 533.
31 июля 2015 в 08:27
@MarcoKerwitz Я достаточно хорошо знаком с исходным кодом jquery. Мне повезло.
15 сентября 2015 в 08:28
@DanFromGermany В конце файла были две новые строки. Он удалил одну из них.
21 апреля 2016 в 01:27
@Alberto исходный вопрос, когда его спросили, касался решения JQuery и с тех пор обновлялся несколько раз.
21 апреля 2016 в 01:31
Если это так, почему ваш ответ, который включает jQuery, по-прежнему считается правильным, если он устарел? Я не пытаюсь вести себя глупо, меня просто раздражает каждый раз, когда я нахожу что-то подобное
30 апреля 2016 в 16:21
не могли бы вы обновить объяснение области просмотра браузера, HTML-документа и экрана?
11 июня 2016 в 07:43
@Marco Kerwitz Хуже всего то, что я набрал «javascript get window width», и содержание этого ответа было в Google. Большой минус от меня.
3 января 2017 в 14:23
Прекратите давать конкретные ответы на jquery. OP НЕ запрашивал ответ jquery.
18 января 2017 в 02:14
@AdamArold Прекратите комментировать, не зная фактов. Исходный вопрос был специально задан для конкретного ответа JQuery и с тех пор несколько раз редактировался модераторами. Есть и другие ответы с ванильными решениями javascript, используйте их, если вам не нравится JQuery.
18 января 2017 в 12:11
Я знаю факты. Прекратите предполагать, что я этого не делаю. факт состоит в том, что в ответе нет тега jquery, поэтому ваш ответ неуместен. Кроме того, изначально вопрос также не содержал тега jquery . Он был добавлен позже кем-то, но без надобности.
22 июня 2017 в 18:49
Обратите внимание, что если вы измените разрешение экрана, возвращаемые значения ширины / высоты экрана соответственно изменятся. Другими словами, вы получаете НЕ физические размеры, а, скорее, размеры в пикселях.
10 августа 2017 в 23:47
@AdamArold - На самом деле, как бы мне ни не нравился этот факт, исходный вопрос конкретно указывал "или jquery" в своем тексте. Я тоже ненавижу jQuery, но мне трудно выпороть ответчика, когда OP специально указал это как допустимый ответ.
3 февраля 2018 в 14:03
OP СПРОСИЛ , что jquery является опцией. Тот, кто ниндзя редактировал исходный вопрос, чтобы исключить его, виноват здесь, а не люди, дающие законные ответы, используя всемирно признанную библиотеку javascript.
12 декабря 2018 в 13:45
Это не работает, если вы встраиваете iframe и пытаетесь получить высоту порта просмотра. window.innerHeight, равный высоте документа, который содержит ошибки.
1 февраля 2020 в 21:13
В 2020 году спрашивать, как что-то делать с JQuery, действительно, очень раздражает ... Больше разработчиков не используют его, чем используют. Мы можем делать людей лучше. Мы можем лучше.
5 марта 2020 в 14:21
Хорошая точка зрения. Я, вероятно, должен был сказать, что получение высоко оцененных ответов с участием устаревшей библиотеки, которая больше не актуальна для всех разработчиков, помогает в поиске ответа снижает ценность всей платформы, продлевает срок прекращения устаревшего программного обеспечения и ошибочно указывает новым членам сообщества что старые библиотеки более актуальны, чем они есть. Обмену стеками нужна функция амортизации или что-то в этом роде.
5 марта 2020 в 14:25
Теперь, когда я думаю об этом ... Вау. Этому ответу 10 лет. Даже до IE11. В сетях обмена стеками должна быть какая-то функция устаревания. Через несколько лет это сокрушит всю платформу. Такие популярные ответы требуют много времени, чтобы сообщество проголосовало за что-то еще. Нам нужен "обесцененный" тег или что-то в этом роде.
Kamil Kiełczewski
9 июня 2020 в 08:39
Полный 2020
Я удивлен, что на вопрос уже около 10 лет, и похоже, что до сих пор никто не дал полного ответа (с 10 значениями). Поэтому я внимательно анализирую вопрос OP (особенно изображение) и делаю несколько замечаний
- центр системы координат
(0,0)находится в верхнем левом углу окна просмотра (окно браузера без полос и основных границ), а оси направлены вправо и вниз (что было отмечено на изображении OP), поэтому значенияpageX, pageY, screenX, screenYдолжны быть отрицательным (или нулем, если страница маленькая или не прокручивается) - для
screenHeight/WidthOP хочет подсчитать высоту / ширину экрана, включая строку системного меню (например, в MacOs) - вот почему мы НЕ используем.availWidth/Height(не считая его) - для
windowWidth/HeightOP не хочет подсчитывать размер полос прокрутки, поэтому мы используем.clientWidth/Height -
screenY- в приведенном ниже решении мы добавляем к положению верхнего левого угла браузера (window.screenY) высоту его меню / вкладок / строки URL). Но это значение трудно вычислить, если в браузере отображается нижняя панель загрузки и / или если консоль разработчика открыта в нижней части страницы - в этом случае это значение будет увеличено на размер этой панели / высоты консоли в приведенном ниже решении. Вероятно, невозможно прочитать значение высоты панели / консоли для корректировки (без какой-либо уловки, например, попросить пользователя закрыть эту панель / консоль перед измерениями ...) -
pageWidth- в случае, когда pageWidth меньше, чем windowWidth, нам нужно вручную вычислить размер<body>дочерних элементов, чтобы получить это значение (мы делаем пример расчета вcontentWidthв приведенном ниже решении - но в целом это может быть сложно для этого case) - для простоты я предполагаю, что
<body>маржа = 0 - в противном случае вы должны учитывать эти значения при вычисленииpageWidth/HeightиpageX/Y
function sizes() {
let contentWidth = [...document.body.children].reduce(
(a, el) => Math.max(a, el.getBoundingClientRect().right), 0)
- document.body.getBoundingClientRect().x;
return {
windowWidth: document.documentElement.clientWidth,
windowHeight: document.documentElement.clientHeight,
pageWidth: Math.min(document.body.scrollWidth, contentWidth),
pageHeight: document.body.scrollHeight,
screenWidth: window.screen.width,
screenHeight: window.screen.height,
pageX: document.body.getBoundingClientRect().x,
pageY: document.body.getBoundingClientRect().y,
screenX: -window.screenX,
screenY: -window.screenY - (window.outerHeight-window.innerHeight),
}
}
// TEST
function show() {
console.log(sizes());
}body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }<div class="box">
CAUTION: coderhelper snippet gives wrong values for screenX-Y,
but if you copy this code to your page directly the values will be right<br>
<button onclick="show()" style="">CALC</button>
</div>Я тестировал его в Chrome 83.0, Safari 13.1, Firefox 77.0 и Edge 83.0 на MacOs High Sierra
30 сентября 2021 в 00:03
Спасибо за современный ответ. Я надеюсь, что за него проголосуют дальше, в верхней части страницы. Быстрый вопрос, как повторно запустить функцию при изменении размера окна?
Prashant Gupta
11 января 2020 в 14:35
С введением globalThis в ES2020 вы можете использовать такие свойства, как.
Для размера экрана:
globalThis.screen.availWidth
globalThis.screen.availHeight
Для размера окна
globalThis.outerWidth
globalThis.outerHeight
Для смещения:
globalThis.pageXOffset
globalThis.pageYOffset
... и т. Д.
alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)
Hamza Iftikhar
3 декабря 2019 в 09:26
Полное руководство по размерам экрана
JavaScript
Для высоты:
document.body.clientHeight // Inner height of the HTML document body, including padding
// but not the horizontal scrollbar height, border, or margin
screen.height // Device screen height (i.e. all physically visible stuff)
screen.availHeight // Device screen height minus the operating system taskbar (if present)
window.innerHeight // The current document's viewport height, minus taskbars, etc.
window.outerHeight // Height the current window visibly takes up on screen
// (including taskbars, menus, etc.)
Примечание: когда окно развернуто, оно будет равно screen.availHeight
Для ширины:
document.body.clientWidth // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width // Device screen width (i.e. all physically visible stuff)
screen.availWidth // Device screen width, minus the operating system taskbar (if present)
window.innerWidth // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth // The outer window width (including vertical scroll bar,
// toolbars, etc. includes padding and border but not margin)
JQuery
Для высоты:
$(document).height() // Full height of the HTML page, including content you have to
// scroll to see
$(window).height() // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.
Для ширины:
$(document).width() // The browser viewport width, minus the vertical scroll bar
$(window).width() // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth() // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth() // The browser viewport width (minus the vertical scroll bar)
Prashant Yalatwar
26 июня 2019 в 06:59
Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570 иначе вернуть 200
var screenWidth = window.screen.availWidth;
<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a </Label>
user8202629
13 сентября 2017 в 04:36
вот мое решение!
// innerWidth
const screen_viewport_inner = () => {
let w = window,
i = `inner`;
if (!(`innerWidth` in window)) {
i = `client`;
w = document.documentElement || document.body;
}
return {
width: w[`${i}Width`],
height: w[`${i}Height`]
}
};
// outerWidth
const screen_viewport_outer = () => {
let w = window,
o = `outer`;
if (!(`outerWidth` in window)) {
o = `client`;
w = document.documentElement || document.body;
}
return {
width: w[`${o}Width`],
height: w[`${o}Height`]
}
};
// style
const console_color = `
color: rgba(0,255,0,0.7);
font-size: 1.5rem;
border: 1px solid red;
`;
// testing
const test = () => {
let i_obj = screen_viewport_inner();
console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
let o_obj = screen_viewport_outer();
console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};
// IIFE
(() => {
test();
})();13 сентября 2017 в 04:47
! экран-ок
solanki...
9 июля 2016 в 04:22
Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта с помощью «консоли» или после нажатия «Проверить» .
шаг 1 : Щелкните правой кнопкой мыши и щелкните «Осмотреть», а затем щелкните «Консоль»
шаг 2 : Убедитесь, что экран вашего браузера не находится в режиме «развернуть». Если экран браузера находится в режиме «развернуть», вам нужно сначала щелкнуть кнопку развертывания (присутствует в правом или левом верхнем углу) и отменить ее развертывание.
шаг 3 : Теперь напишите следующее после знака «больше чем» ('>'), т.е.
> window.innerWidth
output : your present window width in px (say 749)
> window.innerHeight
output : your present window height in px (say 359)
pyrsmk
13 апреля 2016 в 08:16
Я разработал библиотеку для определения реального размера области просмотра для настольных компьютеров и мобильных браузеров, потому что размеры области просмотра на разных устройствах несовместимы и не могут полагаться на все ответы в этой публикации (согласно всем исследованиям, которые я провел по этому поводу): https://github.com/pyrsmk/W
Andi Giga
31 марта 2016 в 09:25
Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер, и всякий раз, когда вы нажимаете на него, вы увидите размер в правом углу окна браузера.
Здесь вы найдете информацию о том, как использовать букмарклет. https://en.wikipedia.org/wiki/Bookmarklet
Букмарклет
javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);
Исходный код
Исходный код в кофе:
(->
addWindowSize = ()->
style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
$windowSize = $('<div style="' + style + '"></div>')
getWindowSize = ->
'<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'
$windowSize.html getWindowSize()
$('body').prepend $windowSize
$(window).resize ->
$windowSize.html getWindowSize()
return
if !($ = window.jQuery)
# typeof jQuery=='undefined' works too
script = document.createElement('script')
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
script.onload = addWindowSize
document.body.appendChild script
else
$ = window.jQuery
addWindowSize()
)()
В основном код добавляет небольшой div, который обновляется при изменении размера окна.
Zach Barham
6 ноября 2015 в 04:47
Вы можете использовать объект Экран, чтобы получить это.
Ниже приведен пример того, что он вернет:
Screen {
availWidth: 1920,
availHeight: 1040,
width: 1920,
height: 1080,
colorDepth: 24,
pixelDepth: 24,
top: 414,
left: 1920,
availTop: 414,
availLeft: 1920
}
Чтобы получить переменную screenWidth, просто используйте screen.width, то же самое с screenHeight, вы должны просто использовать screen.height.
Чтобы получить ширину и высоту окна, это будет screen.availWidth или screen.availHeight соответственно.
Для переменных pageX и pageY используйте window.screenX or Y. Обратите внимание, что это из ОЧЕНЬ ЛЕВОГО / ВЕРХНЕГО ЛЕВОГО / ВЕРХНЕГО ЭКРАНА . Итак, если у вас есть два экрана шириной 1920, то окно в 500 пикселей слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height, однако отображать ТЕКУЩУЮ ширину или высоту экрана.
Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width().
Снова используя jQuery, используйте $("html").offset().top и $("html").offset().left для значений pageX и pageY.
4 июня 2020 в 21:23
screenX / Y относится к основному экрану, а не к самому левому / самому верхнему экрану. Вот почему значение отрицательное, если вы в данный момент находитесь на экране слева от основного экрана.
Akim Kelar
15 октября 2015 в 08:30
В некоторых случаях, связанных с адаптивным макетом, $(document).height() может возвращать неверные данные, отображающие только высоту порта просмотра.
Например, когда какая-то оболочка div # имеет высоту: 100%, эта #wrapper может быть растянута каким-либо блоком внутри нее. Но его высота по-прежнему будет равна высоте окна просмотра. В такой ситуации вы можете использовать
$('#wrapper').get(0).scrollHeight
Фактический размер оболочки.
Aabha Pandey
22 апреля 2015 в 07:29
Но когда мы говорим об адаптивных экранах и если по какой-то причине мы хотим обрабатывать это с помощью jQuery,
window.innerWidth, window.innerHeight
дает правильное измерение. Даже при этом удаляется лишнее пространство полосы прокрутки, и нам не нужно беспокоиться о его настройке :)
hashchange
4 марта 2015 в 22:30
Если вам нужно действительно надежное решение для ширины и высоты документа (pageWidth и pageHeight на картинке), вы можете рассмотреть возможность использования моего плагина jQuery.documentSize .
У него только одна цель: всегда возвращать правильный размер документа, даже в сценариях, когда jQuery и другие методы не работают. Несмотря на название, вам не обязательно использовать jQuery - он написан на обычном Javascript и работает без jQuery.
Использование:
var w = $.documentWidth(),
h = $.documentHeight();
для глобального document. Для других документов, например во встроенном iframe, к которому у вас есть доступ, передайте документ в качестве параметра:
var w = $.documentWidth( myIframe.contentDocument ),
h = $.documentHeight( myIframe.contentDocument );
Обновление: теперь для размеров окна тоже
Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окон.
Это необходимо, потому что
-
$( window ).height()глючит в iOS, вплоть до бесполезности -
$( window ).width()и$( window ).height()ненадежны для мобильных, потому что они не справляются с эффектами мобильного масштабирования.
jQuery.documentSize предоставляет $.windowWidth() и $.windowHeight(), которые решают эти проблемы. Подробнее см. в документации.
jave.web
2 марта 2015 в 16:05
Иногда вам нужно увидеть изменение ширины / высоты при изменении размера окна и внутреннего содержимого.
Для этого я написал небольшой скрипт, который добавляет окно журнала, которое динамически отслеживает все изменения размера и почти немедленно обновляет.
Он добавляет действительный HTML-код с фиксированной позицией и высоким z-индексом, но он достаточно мал, поэтому вы можете :
- используйте его на фактическом сайте
- используйте его для тестирования мобильного / адаптивного просмотры
Протестировано на: Chrome 40, IE11, но вполне возможно работать и в других / старых браузерах ... :)
function gebID(id){ return document.getElementById(id); }
function gebTN(tagName, parentEl){
if( typeof parentEl == "undefined" ) var parentEl = document;
return parentEl.getElementsByTagName(tagName);
}
function setStyleToTags(parentEl, tagName, styleString){
var tags = gebTN(tagName, parentEl);
for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
}
function testSizes(){
gebID( 'screen.Width' ).innerHTML = screen.width;
gebID( 'screen.Height' ).innerHTML = screen.height;
gebID( 'window.Width' ).innerHTML = window.innerWidth;
gebID( 'window.Height' ).innerHTML = window.innerHeight;
gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;
gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;
}
var table = document.createElement('table');
table.innerHTML =
"<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
+"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
+"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
+"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
+"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
;
gebTN("body")[0].appendChild( table );
table.setAttribute(
'style',
"border: 2px solid black !important; position: fixed !important;"
+"left: 50% !important; top: 0px !important; padding:10px !important;"
+"width: 150px !important; font-size:18px; !important"
+"white-space: pre !important; font-family: monospace !important;"
+"z-index: 9999 !important;background: white !important;"
);
setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );
setInterval( testSizes, 200 );
РЕДАКТИРОВАТЬ: Теперь стили применяются только к элементу таблицы регистратора - не ко всем таблицам - также это решение без jQuery :)
confile
30 января 2015 в 17:44
Вот кроссбраузерное решение с чистым JavaScript (Источник):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
14 августа 2015 в 19:00
Это лучше, потому что если вы можете вызвать сценарий достаточно рано в процессе загрузки (часто идея), то body element вернет значение undefined, поскольку dom еще не загружен.
15 сентября 2016 в 20:32
Ха! Старая ветка, но спасибо за это! Я полагаю, что я один из тех старых «идиотов», которые пытаются поддержать хотя бы возврат к IE8, когда это возможно, в интересах удивительного количества старых домашних пользователей, которые никогда не перестанут использовать XP, пока их машины не загорятся. Я устаю задавать вопросы, и вместо того, чтобы получать ответ, я проигрываю голосом только с фразой «ПРЕКРАТИТЬ ПОДДЕРЖКУ IE8 !!» в качестве комментария. Еще раз спасибо! Это решило для меня проблему с масштабированием фотографий на чистом javascript, которое я сделал. Это немного медленнее на IE8, но теперь, по крайней мере, он работает !!! :-)
29 сентября 2021 в 23:59
@Randy Разве старая машина с Windows XP не может просто запустить новую версию Fire-Fox или что-то еще?
1 октября 2021 в 04:57
@ WinEunuuchs2Unix Поскольку в 2016 году я прокомментировал, что ответ решил мою проблему, почему переключение браузеров имеет значение? Вы не можете сказать посетителям вашего сайта переключить браузер. Если сайт не работает, они уходят. И НЕТ <вы не можете загрузить последнюю версию браузера Firefox на компьютер с Windows XP.
serfer2
21 августа 2014 в 10:44
Вы также можете получить ширину и высоту ОКНА, избегая панелей инструментов браузера и прочего. Это реальная полезная область в окне браузера .
Для этого используйте:
Свойства window.innerWidth и window.innerHeight (см. Документ в w3schools).
В большинстве случаев это будет лучший способ, например, отобразить идеально центрированный плавающий модальный диалог. Он позволяет рассчитывать позиции в окне независимо от того, какое разрешение или размер окна использует браузер.
Daniel W.
20 июня 2013 в 10:06
Способ получения доступного размера экрана, отличный от jQuery. window.screen.width/height уже размещен, но для обеспечения гибкости веб-дизайна и полноты, я думаю, стоит упомянуть эти атрибуты:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10:
availWidth и availHeight - доступные ширина и высота на экран (за исключением панелей задач ОС и т. п.).
sidonaldson
31 июля 2012 в 15:52
Здесь есть все, что вам нужно знать: Получить размер окна просмотра / окна
а вкратце:
var win = window,
doc = document,
docElem = doc.documentElement,
body = doc.getElementsByTagName('body')[0],
x = win.innerWidth || docElem.clientWidth || body.clientWidth,
y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);
Пожалуйста, прекратите редактировать этот ответ. Теперь его редактировали 22 раза разные люди, чтобы соответствовать их предпочтениям в формате кода. Также отмечалось, что это не требуется, если вы хотите настроить таргетинг только на современные браузеры - в таком случае вам понадобится только следующее:
const width = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight||
document.body.clientHeight;
console.log(width, height);
27 января 2014 в 03:32
Почему не g = document.body?
27 января 2014 в 22:34
@apaidnerd: Браузеры, игнорирующие стандарты, такие как IE8, не поддерживают document.body. IE9, однако, делает.
27 сентября 2014 в 19:48
@MichaelMikowski Это неправда! Даже IE5 поддерживает document.body.
28 сентября 2014 в 01:07
@nux Я исправился, и я подтвердил поддержку в IE8. Тем не менее, я знаю, что по крайней мере один браузер, на который мы недавно нацелились, не поддерживал document.body, и нам пришлось изменить его, чтобы использовать подход getElementsByTagName. Но, наверное, я неправильно запомнил браузер. Извините!
2 июня 2018 в 23:27
Я просто хотел бы очень осторожно заметить, что однобуквенные имена переменных никогда не помогают.
29 сентября 2021 в 23:57
Это второй раз за два дня, когда я вижу «современный браузер» в ответе, написанном в 2012 году. Можно ли сейчас предположить, что 2022 год не за горами, ответ будет для «всех» браузеров?
1 октября 2021 в 04:53
Единственное раздражение заключается в том, что некоторые браузеры подойдут (то есть его невозможно даже поймать с помощью конструкции try / catch), если у вас даже есть ссылка на несуществующие свойства документа или окна. Это означает, что вам почти нужно обнаружить браузер и использовать document.write для динамического добавления кода, когда это безопасно. Нижняя линия. совместимость со всеми браузерами, начиная с IE-8, становится рутиной, от которой даже лучшие из нас готовы отказаться.
dude
11 февраля 2012 в 04:25
function wndsize(){
var w = 0;var h = 0;
//IE
if(!window.innerWidth){
if(!(document.documentElement.clientWidth == 0)){
//strict mode
w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
} else{
//quirks mode
w = document.body.clientWidth;h = document.body.clientHeight;
}
} else {
//w3c
w = window.innerWidth;h = window.innerHeight;
}
return {width:w,height:h};
}
function wndcent(){
var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
//IE
if(!window.pageYOffset){
//strict mode
if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
//quirks mode
else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
//w3c
else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');
pageHeight (на картинке) вы можете получить с помощью: document.body.scrollHeight
см. https://developer.mozilla.org/en-US/docs/Web/API/Window.screen и http://www.quirksmode.org/dom/w3c_cssom.html# экран
Может ли это быть актуально? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
Интересно: ryanve.com/lab/dimensions
Полезное руководство - w3schools.com/jsref/prop_win_innerheight.asp
Как прокомментировали другие под ответами, есть лучшие решения, чем принятый ответ. Пожалуйста, подумайте об изменении принятого ответа.