Vraag Hoe de schermresolutie met JavaScript te detecteren?


Is er een manier die werkt voor alle browsers?


148
2018-02-11 03:36


oorsprong


antwoorden:


origineel antwoord

Ja.

window.screen.availHeight
window.screen.availWidth

bijwerken 2017/11/10

Van tsunami's in de comments:

Om de eigen resolutie van dat wil zeggen een mobiel apparaat te krijgen, moet je vermenigvuldigen met de pixelverhouding van het apparaat: window.screen.width * window.devicePixelRatio en window.screen.height * window.devicePixelRatio. Dit werkt ook op desktops, die een verhouding van 1 hebben.

En van Ben in een ander antwoord:

In JavaScript vanille, geeft dit je de BESCHIKBARE breedte / hoogte:

window.screen.availHeight
window.screen.availWidth

Gebruik voor de absolute breedte / hoogte:

window.screen.height
window.screen.width

222
2018-02-11 03:39



var width = screen.width;
var height = screen.height;

46
2017-10-11 19:19



In JavaScript van vanille, geeft dit je de BESCHIKBAAR breedte hoogte:

window.screen.availHeight
window.screen.availWidth

Gebruik voor de absolute breedte / hoogte:

window.screen.height
window.screen.width

Beide van het bovenstaande kunnen worden geschreven zonder het voorvoegsel van het venster.

Zoals jQuery? Dit werkt in alle browsers, maar elke browser geeft verschillende waarden.

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

31
2017-08-31 23:12



Met behulp van jQuery kunt u het volgende doen:

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

20
2018-03-04 15:41



Bedoel je beeldschermresolutie (bijvoorbeeld 72 dots per inch) of pixelafmetingen (browservenster is momenteel 1000 x 800 pixels)?

Met de schermresolutie weet u hoe dik een 10-pixellijn in inches zal zijn. Pixelafmetingen geven aan welk percentage van de beschikbare schermhoogte wordt ingenomen door een horizontale lijn van 10 pixels breed.

Het is niet mogelijk om de schermresolutie alleen te kennen van Javascript, omdat de computer zelf meestal niet de werkelijke afmetingen van het scherm kent, alleen het aantal pixels. 72 dpi is de gebruikelijke gok ....

Merk op dat er veel verwarring is over de schermresolutie, vaak gebruiken mensen de term in plaats van pixelresolutie, maar de twee zijn behoorlijk verschillend. Zien Wikipedia

Natuurlijk kunt u de resolutie ook meten in dots per cm. Er is ook het obscure onderwerp van niet-vierkante punten. Maar ik dwaal af.


18
2018-02-11 03:51



Om dit op een mobiel apparaat te krijgen, heb je nog een paar stappen nodig. screen.availWidth blijft hetzelfde ongeacht de richting van het apparaat.

Hier is mijn oplossing voor mobiel:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

11
2017-10-10 07:32



U kunt ook de WINDOW-breedte en -hoogte verkrijgen, waardoor browser-werkbalken worden vermeden en ... (niet alleen de schermgrootte).

Gebruik hiervoor: window.innerWidth  en window.innerHeight eigenschappen. Bekijk het op w3schools.

In de meeste gevallen is dit bijvoorbeeld de beste manier om een ​​perfect gecentreerde zwevende modale dialoog weer te geven. Hiermee kunt u posities in het venster berekenen, ongeacht de resolutie of de grootte van het venster via de browser.


10
2017-08-21 10:38



Zien Krijg monitorschermresolutie met Javascript en de window.screen voorwerp 


7
2018-02-11 03:40