Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Неправильное определение высоты окна браузера (https://javascript.ru/forum/jquery/59889-nepravilnoe-opredelenie-vysoty-okna-brauzera.html)

vettel 01.12.2015 22:26

Неправильное определение высоты окна браузера
 
Здравствуйте!
У меня возникла проблема с определением высоты окна браузера в моб. устройствах.
Задачей является задание определенному элементу высоты в зависимости от высоты окна.
Я определяю высоту окна вот так:
$(window).height();

и в компьютерных браузерах все работает отлично, но вот в мобильных почему-то в итоге определяет меньшую высоту, чем есть на самом деле.
Кто знает, как можно решить этот косяк? Уже не в первый раз кстати встречаю его.

vettel 01.12.2015 22:37

Скажем, на iPhone6 погрешность составляет почти 100 пикселей, на других моделях меньше, но она все равно есть.

Barbos 02.12.2015 00:09

Попробуй на javascript
window.screen.height

vettel 02.12.2015 00:42

Barbos,
При этом выбивается длина самого экрана, а он меньше. На том же Айфоне она меньше, да на любом устройстве, чем высота окна браузера (видимо, браузер эмулирует).
Полазил по англоязычному нету немного, там тоже решения толком нету. Все из-за того, что адресс-бар (вверху) сбивает правильные вычисления.
А точной технологии так и не нашел.

Rise 02.12.2015 00:49

vettel, тебе viewport надо или весь документ?

Rise 02.12.2015 01:04

vettel, viewport:
window.innerHeight || window.document.documentElement.clientHeight

Rise 02.12.2015 01:05

Barbos, это типа разрешения экрана...

vettel 02.12.2015 13:39

Rise,
мне нужен вьюпорт, и window.innerHeight || window.document.documentElement.clientHeight
тоже не канает, выдает одно и то же значение, что и window.height() (разница в 1-2 пикселя), то есть со значительной погрешностью.

vettel 02.12.2015 13:44

Полазил по английскому нету немного, там тоже толком решения проблемы нет.
Но есть такой фикс, который хорошо работает под iOS, может кому-то интересно будет:

var getIOSWindowHeight = function() {    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};

// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
    var tH = (window.orientation === 0 ? screen.height : screen.width) -  getIOSWindowHeight();
    return tH > 1 ? tH : 0;
    alert(tH);
};

Соответственно, правильная полная длина окна - сумма результатов двух функций. В случае надобности (при наличии адресс-бара) просто берется результат первой функции.

В Андроиде тоже работает, но немного по-другому - там для правильного вычисления при наличии адрессбара нужно резалт второй функции поделить на 2 где-то, хотя точного резалта все равно не будет. Это погрешность мобильных устройств.

Rise 02.12.2015 19:40

Цитата:

Сообщение от vettel (Сообщение 398394)
мне нужен вьюпорт

вьюпорт так то это область просмотра без всяких тулбаров и тд...
Цитата:

Сообщение от vettel (Сообщение 398394)
выдает одно и то же значение

Это же одно выражение...


Часовой пояс GMT +3, время: 07:15.