Pobierz rozmiar ekranu, bieżącej strony internetowej i okna przeglądarki
Jak mogę dostać windowWidth
, windowHeight
, pageWidth
, pageHeight
, screenWidth
, screenHeight
, pageX
, pageY
, screenX
, screenY
które będą działać we wszystkich głównych przeglądarkach?
17 answers
Jeśli używasz jQuery, możesz uzyskać rozmiar okna lub dokumentu za pomocą metod jQuery:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)
Dla rozmiaru ekranu możesz użyć obiektu screen
w następujący sposób:
screen.height;
screen.width;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-24 18:12:01
To wszystko, co musisz wiedzieć:
Http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
Ale w skrócie:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-05 08:25:39
Oto rozwiązanie cross browser z czystym JavaScript (Źródło):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-29 13:46:01
Inny niż jQuery sposób na uzyskanie dostępnego wymiaru ekranu. window.screen.width/height
został już wystawiony, ale ze względu na responsywny webdesign i kompletność myślę, że warto wspomnieć o tych atrybutach:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
Http://www.quirksmode.org/dom/w3c_cssom.html#t10 :
AvailWidth i availHeight - dostępna szerokość i wysokość na ekran (z wyłączeniem pasków zadań systemu operacyjnego i tym podobnych).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-27 22:29:35
Ale kiedy mówimy o responsywnych ekranach i jeśli chcemy obsłużyć je za pomocą jQuery z jakiegoś powodu,
window.innerWidth, window.innerHeight
Daje prawidłowy pomiar. Nawet usuwa dodatkową przestrzeń paska przewijania i nie musimy się martwić o dostosowanie tej przestrzeni:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-22 07:29:55
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>');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-24 19:31:20
Możesz również uzyskać szerokość i wysokość okna, unikając pasków narzędzi przeglądarki i innych rzeczy. Jest to rzeczywisty obszar użytkowy w oknie przeglądarki .
Aby to zrobić, użyj:
window.innerWidth
i window.innerHeight
właściwości (patrz doc w w3schools ).
W większości przypadków najlepszym sposobem, na przykład, będzie wyświetlenie idealnie wyśrodkowanego pływającego okna modalnego. Pozwala na obliczanie pozycji na oknie, bez względu na Orientację rozdzielczości lub rozmiar okna używanego w przeglądarce.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-21 10:44:03
Aby sprawdzić wysokość i szerokość aktualnie załadowanej strony dowolnej witryny za pomocą "console" lub po kliknięciu "Inspect" .
Krok 1: Kliknij prawym przyciskiem myszy i kliknij "Sprawdź", a następnie kliknij "konsola"
Krok 2 : Upewnij się, że ekran przeglądarki nie powinien być w trybie "maksymalizacji". Jeśli ekran przeglądarki jest w trybie "maksymalizacji", musisz najpierw kliknąć przycisk maksymalizacji (obecny w prawym lub lewym górnym rogu) i anulować maksymalizację to.
Krok 3 : Teraz po znaku większym niż ('>') wpisz następujący tekst, tzn.
> window.innerWidth
output : your present window width in px (say 749)
> window.innerHeight
output : your present window height in px (say 359)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-09 04:22:32
Jeśli potrzebujesz naprawdę kuloodpornego rozwiązania dla szerokości i wysokości dokumentu (pageWidth
i pageHeight
Na zdjęciu), możesz rozważyć użycie mojej wtyczki jQuery.documentSize .
Ma tylko jeden cel: zawsze zwracać prawidłowy rozmiar dokumentu, nawet w scenariuszach, gdy jQuery i inne metody zawodzą. Pomimo jego nazwy, nie musisz używać jQuery – jest napisany w vanilla Javascript i Działa bez jQuery , też.
Użycie:
var w = $.documentWidth(),
h = $.documentHeight();
Dla globalnego document
. W przypadku innych dokumentów, np. w osadzonej ramce iframe, do której masz dostęp, Przekaż dokument jako parametr:
var w = $.documentWidth( myIframe.contentDocument ),
h = $.documentHeight( myIframe.contentDocument );
Aktualizacja: teraz również dla wymiarów okien
Od wersji 1.1.0 jQuery.documentSize obsługuje również wymiary okien.
Jest to konieczne, ponieważ
- W przeciwieństwie do poprzednich wersji, nie jest on w pełni funkcjonalny.]}
-
$( window ).width()
i$( window ).height()
są zawodne na urządzeniach mobilnych ponieważ nie radzą sobie z efektami mobilnego powiększania.
JQuery.documentSize dostarcza $.windowWidth()
i $.windowHeight()
, które rozwiązują te problemy. Więcej informacji można znaleźć w w dokumentacji .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:36
Napisałem małą książeczkę javascript, której możesz użyć do wyświetlenia rozmiaru. Możesz łatwo dodać go do przeglądarki i za każdym razem, gdy klikniesz, zobaczysz rozmiar w prawym rogu okna przeglądarki.
Tutaj znajdziesz informacje jak korzystać z bookmarklet https://en.wikipedia.org/wiki/Bookmarklet
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);
Oryginalny Kod
Oryginalny kod jest w kawie:
(->
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()
)()
W zasadzie kod jest poprzedzony małym div, który aktualizacje po zmianie rozmiaru okna.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-31 09:33:26
W niektórych przypadkach związanych z układem responsywnym $(document).height()
może zwracać błędne dane, które wyświetlają tylko wysokość portu widoku.
Na przykład, gdy jakiś div#wrapper ma wysokość: 100%, to #wrapper może być rozciągnięty przez jakiś blok w środku. Ale jego wysokość nadal będzie jak wysokość viewport. W takiej sytuacji możesz użyć
$('#wrapper').get(0).scrollHeight
, który reprezentuje rzeczywisty rozmiar wrappera.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-15 08:30:58
Opracowałem bibliotekę do poznania rzeczywistego rozmiaru viewport dla komputerów stacjonarnych i mobilnych, ponieważ rozmiary viewport są niespójne na różnych urządzeniach i nie mogą polegać na wszystkich odpowiedziach tego postu (zgodnie z wszystkimi badaniami, które zrobiłem na ten temat): https://github.com/pyrsmk/W
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-13 08:16:56
Czasami musisz zobaczyć zmiany szerokości/wysokości podczas zmiany rozmiaru okna i wewnętrznej zawartości.
W tym celu napisałem mały skrypt, który dodaje okno dziennika, które dynamicznie monitoruje wszystkie zmiany rozmiaru i prawie natychmiast aktualizuje.
Dodaje poprawny HTML ze stałą pozycją i wysokim indeksem z, ale jest wystarczająco mały, więc możesz :
- Użyj go na aktualna strona
- Użyj go do testowania mobile / responsive widoki
testowane na: Chrome 40, IE11, ale bardzo możliwe jest również działanie na innych / starszych przeglądarkach ... :)
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: teraz style są stosowane tylko do elementu tabeli loggera - nie do wszystkich tabel-również jest to rozwiązanie jQuery-free:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-01 12:17:32
Możesz użyć obiektu Screen , aby to uzyskać.
Oto przykład tego, co zwróci:
Screen {
availWidth: 1920,
availHeight: 1040,
width: 1920,
height: 1080,
colorDepth: 24,
pixelDepth: 24,
top: 414,
left: 1920,
availTop: 414,
availLeft: 1920
}
Aby otrzymać zmienną screenWidth
, Wystarczy użyć screen.width
, tak samo z screenHeight
, wystarczy użyć screen.height
.
Aby uzyskać szerokość i wysokość okna, będzie to odpowiednio screen.availWidth
lub screen.availHeight
.
Dla zmiennych pageX
i pageY
użyj window.screenX or Y
. Zauważ, że jest to z bardzo lewej/górnej części twojego lewego / górnego ekranu . Więc jeśli masz dwa ekrany szerokość 1920
wtedy okno 500px z lewej strony prawego ekranu będzie miało wartość X2420
(1920+500). screen.width/height
, jednak wyświetla szerokość lub wysokość bieżącego ekranu.
Aby uzyskać szerokość i wysokość strony, użyj jQuery $(window).height()
lub $(window).width()
.
Ponownie używając jQuery, użyj $("html").offset().top
i $("html").offset().left
dla wartości pageX
i pageY
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-11 15:52:21
Oto moje rozwiązanie!
// 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();
})();
Możemy teraz bezpiecznie używać tylko natywnego javascript window api we wszystkich przeglądarkach , bez kontekstu okna.
Składnia jest dość jasna!
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
})()
Aby uzyskać dokładne wyniki w każdej przeglądarce i urządzeniu, wyniki należy pomnożyć przez devicePixelRatio .
Właściwość Window devicePixelRatio zwraca stosunek rozdzielczość w pikselach fizycznych do rozdzielczości w pikselach CSS dla aktualny wyświetlacz urządzenie. Wartość tę można również interpretować jako stosunek wielkości pikseli: wielkość jednego piksela CSS do wielkości jednego piksel fizyczny. Mówiąc prościej, mówi to przeglądarce, ile z rzeczywiste piksele ekranu powinny być używane do rysowania pojedynczego piksela CSS.
Jest to przydatne przy radzeniu sobie z różnicą pomiędzy renderowaniem na standardowy wyświetlacz w porównaniu z wyświetlaczem HiDPI lub Retina, które wykorzystują więcej pikseli ekranu, aby narysować te same obiekty, co skutkuje ostrzejszym obrazem.
Nie ma możliwości powiadomienia o zmianie tej wartości (co może się, na przykład, jeśli użytkownik przeciągnie okno na wyświetlacz z różnej gęstości pikseli). Ponieważ nie ma wywołań zwrotnych ani zdarzeń dostępne do wykrywania zmian gęstości pikseli, jedynym sposobem na to jest okresowo sprawdzaj wartość devicePixelRatio, aby sprawdzić, czy jest zmieniony. Po prostu nie rób tego zbyt często, bo wpłynie to na wydajność.
Https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-03 19:13:08
Oto moje rozwiązanie. Najpierw pojawia się jakiś obiekt użytkowy do pracy z ciasteczkiem
/* 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);
Wtedy możesz zrobić coś takiego..
/*
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();
}
W ten sposób możesz użyć języka serwera, aby odczytać pliki cookie i uzyskać dokładny rozmiar obrazu ekranu użytkownika.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-01 07:30:44