Как я могу получить windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY, которые будут работать в все основные браузеры?
Вы можете получить размер окна или документа с помощью 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;
Здесь есть все, что вам нужно знать: Получить размер окна просмотра/окна
но вкратце:
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);
Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 20 раз различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры - если это так, вам нужно только следующее:
const width = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth,
const height = window.innerHeight|| document.documentElement.clientHeight||
document.body.clientHeight;
console.log(width, height);
Вот кросс-браузерное решение с чистым JavaScript (Источник):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Не-jQuery способ получить доступный размер экрана. window.screen.width/height уже выставлен, но для отзывчивого веб-дизайна и полноты я считаю, что стоит упомянуть эти атрибуты:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10:
availWidth и availHeight. Доступная ширина и высота на (исключая панели задач ОС и т.д.).
Но когда мы говорим о чувствительных экранах, и если мы по какой-то причине хотим обработать его с помощью jQuery,
window.innerWidth, window.innerHeight
дает правильное измерение. Даже удаляет лишнее пространство прокрутки, и нам не нужно беспокоиться о настройке этого пространства:)
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>');
Вы также можете получить ширину и высоту WINDOW, избегая панелей инструментов браузера и других вещей. Это реальная полезная область в окне браузера.
Для этого используйте:
window.innerWidth и window.innerHeight свойства (см. документ в w3schools).
В большинстве случаев наилучшим способом является, например, отображение полностью централизованного плавающего модального диалога. Он позволяет вычислять позиции в окне, независимо от того, какая ориентация разрешения или размер окна используются браузером.
Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта с помощью "консоли" или после нажатия "Проверить" .
шаг 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)
Если вам нужна действительно пуленепробиваемое решение для ширины и высоты документа (pageWidth и pageHeight на картинке), вы можете захотеть использовать мой плагин jQuery.documentSize.
У него есть только одна цель: всегда возвращать правильный размер документа даже в сценариях, когда jQuery и другие методы fail. Несмотря на свое название, вам необязательно использовать 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() являются ненадежны на мобильных устройствах, поскольку они не 't обрабатывать эффекты мобильного масштабирования.jQuery.documentSize предоставляет $.windowWidth() и $.windowHeight(), которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация.
Я написал небольшой букмарклет 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, который обновляется при изменении размера вашего окна.
В некоторых случаях, связанных с отзывчивым макетом $(document).height(), можно возвращать неверные данные, отображающие только высоту порта просмотра.
Например, когда какая-то оболочка div # имеет высоту: 100%, этот #wrapper может быть растянут каким-то блоком внутри него. Но высота по-прежнему будет напоминать высоту видового экрана. В такой ситуации вы можете использовать
$('#wrapper').get(0).scrollHeight
Это представляет фактический размер обертки.
Я разработал библиотеку, чтобы узнать реальный размер видового экрана для настольных компьютеров и мобильных браузеров, поскольку размеры видовых экранов являются несогласованными на всех устройствах и не могут полагаться на все ответы этого сообщения (в соответствии со всеми исследованиями, которые я сделал об этом): https://github.com/pyrsmk/W
Иногда вам нужно увидеть изменения ширины и высоты при изменении размера окна и внутреннего содержимого.
Для этого я написал небольшую script, которая добавляет окно журнала, которое динамически контролирует все изменения размера и почти мгновенно обновляет.
Он добавляет допустимый 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 );
EDIT: Теперь стили применяются только к элементу таблицы журналов - не ко всем таблицам - также это решение без jQuery:)
Вы можете использовать объект Screen, чтобы получить это.
Ниже приведен пример того, что он будет возвращать:
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. Обратите внимание, что это от ОЧЕНЬ ЛЕВЫЙ/ТОП ВАШЕГО ВЛЕВО /TOP -est SCREEN. Поэтому, если у вас есть два экрана ширины 1920, тогда окно 500px слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height, однако, отобразите ширину или высоту экрана CURRENT.
Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width().
Снова используя jQuery, используйте $("html").offset().top и $("html").offset().left для ваших значений pageX и pageY.
// 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();
})();Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570, иначе вернуть 200
var screenWidth = window.screen.availWidth;
<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a </Label>
Теперь мы можем безопасно использовать собственное javascript-окно api во всех браузерах без контекста окна.
Синтаксис несколько ясен!
n = "<i>px</i><br>" /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */
"Device zoom level: " + dp
+n+ "Screen width: " + screen.width
*dp+n+ "Screen height: "+ screen.height
*dp+n+ "Document frame height: " + innerHeight
*dp+n+ "Document frame width: " + innerWidth *dp+n+ "Parent document height: "+ outerHeight *dp+n+ "Parent document width: "+ outerWidth *dp+n+ "Window available height: "+ screen.availHeight *dp+n+ "Window available width: "+ screen.availWidth *dp+n+ "Document frame max scrollable X: "+ scrollMaxX *dp+n+ "Document frame max scrollable Y: "+ scrollMaxY
*dp+n+ "Distance from left screen to window: "+ screenX
*dp+n+ "Distance from top screen to window: "+ screenY
*dp+n
})()Вот мое решение. Сначала идет какой-то служебный объект для работы с файлом cookie
/* Simple getter and setter for cookies */
(function(global){
function setCookie(cname, cvalue, exdays) {
exdays = typeof exdays === 'undefined' && 365;
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return undefined;
}
global.Cookie = {
get: getCookie,
set: setCookie
};
})(window);
Тогда вы можете сделать что-то вроде..
/*
Detect screen width and height and save it to a cookie.
We are later using it to resize the images accordingly.
*/
if(
!Cookie.get('screen_width') ||
!Cookie.get('screen_height') ||
Cookie.get('screen_width') != screen.width ||
Cookie.get('screen_height') != screen.height
){
Cookie.set('screen_width', screen.width);
Cookie.set('screen_height', screen.height);
location.reload();
}
Таким образом, вы можете использовать серверный язык для чтения файлов cookie и получения точного размера изображения на экране пользователя.