Вы можете просто использовать свойства width
и height
объекта window.screen
, чтобы получить разрешение экрана (т.е. ширину и высоту экрана).
В следующем примере будет отображаться разрешение вашего экрана при нажатии кнопки.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Screen Resolution Using JavaScript</title>
</head>
<body>
<script>
function getResolution() {
alert("Your screen resolution is: " + screen.width + "x" + screen.height);
}
</script>
<button type="button" onclick="getResolution();">Получить разрешение</button>
</body>
</html>
Чтобы определить собственное разрешение дисплея мобильного устройства (например, дисплея Retina), вам необходимо умножить ширину и высоту экрана на соотношение пикселей устройства, например window.screen.width * window.devicePixelRatio
и window.screen.height * window.devicePixelRatio
.
Соотношение пикселей устройства сообщает браузеру, сколько фактических пикселей экрана устройства следует использовать для рисования одного пикселя CSS. Вы также можете использовать следующий пример, чтобы найти разрешения экрана настольных компьютеров. Экраны настольных компьютеров обычно имеют соотношение пикселей устройства 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Screen Resolution of Mobile Devices with JavaScript</title>
</head>
<body>
<script>
function getResolution() {
alert("Your screen resolution is: " + window.screen.width * window.devicePixelRatio + "x" + window.screen.height * window.devicePixelRatio);
}
</script>
<button type="button" onclick="getResolution();">Получить разрешение</button>
</body>
</html>
Подробнее см. Руководство по window screen JavaScript.