DebugBreak, не повреждающийся

Все решения здесь не предназначены для будущего (что не позволяет Apple выпускать iPad с таким же размером экрана, как у iPad 2, но с тем же разрешением, что и у iPad Mini). Поэтому у меня возникла идея:

Создать div с шириной 1 дюйм и добавить его к телу. Затем я создаю еще один div с шириной 100% и добавляю его к телу:

var div1= $("
").appendTo(document.body).width("1in");
var div2= $("
").appendTo(document.body).width("100%");

Функция jQuery width () всегда возвращает значения в пикселях, поэтому вы можете просто:

var screenSize= div2.width() / div1.width();

screenSize теперь содержит размер , доступный приложению в дюймах (однако, будьте осторожны с ошибками округления). Вы можете использовать это для размещения вашего GUI так, как вам нравится. Также не забудьте удалить ненужные div'ы после этого.

Также обратите внимание, что алгоритм, предложенный Kaspars, не только не будет работать, если пользователь запускает приложение в полноэкранном режиме, но также будет нарушен, если Apple исправит интерфейс браузера.

Это не будет дифференцировать устройства, но, как вы объяснили в своем редактировании, вы на самом деле хотите знать размер экрана устройства. Моя идея также не скажет вам точно размер экрана, но даст вам еще более полезную информацию, фактический размер (в дюймах), который у вас есть для рисования вашего GUI.

РЕДАКТИРОВАТЬ: Используйте этот код, чтобы проверить, действительно ли он работает на вашем устройстве. У меня нет iPad, чтобы протестировать его.

var div1= $("
").appendTo(document.body).width("1in").height("1in").css("position", "absolute");
var div2= $("
").appendTo(document.body).width("100%").height("100%").css("position", "absolute");
var width= div2.width() / div1.width()
var height= div2.height() / div1.height()
alert(Math.sqrt(width*width + height*height));

Должно появиться окно с размером экрана в дюймах. Кажется, он работает на моем ноутбуке, возвращая 15,49, в то время как экран моего ноутбука продается как 15,4 ''. Может кто-нибудь проверить это на iPad и оставить комментарии, пожалуйста? Не забудьте запустить его на весь экран.

РЕДАКТИРОВАТЬ 2: Оказывается, что страница, на которой я ее тестировал, имела несколько противоречивых CSS . Я исправил тестовый код для правильной работы. Вам нужно position: absolute в div, чтобы вы могли использовать высоту в%.

РЕДАКТИРОВАТЬ3: Я провел некоторые исследования, и, кажется, нет никакого способа на самом деле получить размер экрана на любом устройстве. Это не то, что ОС может знать. Когда вы используете модуль реального мира в CSS, это на самом деле просто оценка, основанная на некоторых свойствах вашего экрана. Излишне говорить, что это совсем не точно.