Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2015, 22:26
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

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

и в компьютерных браузерах все работает отлично, но вот в мобильных почему-то в итоге определяет меньшую высоту, чем есть на самом деле.
Кто знает, как можно решить этот косяк? Уже не в первый раз кстати встречаю его.
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2015, 22:37
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

Скажем, на iPhone6 погрешность составляет почти 100 пикселей, на других моделях меньше, но она все равно есть.
Ответить с цитированием
  #3 (permalink)  
Старый 02.12.2015, 00:09
Аватар для Barbos
Новичок на форуме
Отправить личное сообщение для Barbos Посмотреть профиль Найти все сообщения от Barbos
 
Регистрация: 16.11.2015
Сообщений: 7

Попробуй на javascript
window.screen.height
Ответить с цитированием
  #4 (permalink)  
Старый 02.12.2015, 00:42
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

Barbos,
При этом выбивается длина самого экрана, а он меньше. На том же Айфоне она меньше, да на любом устройстве, чем высота окна браузера (видимо, браузер эмулирует).
Полазил по англоязычному нету немного, там тоже решения толком нету. Все из-за того, что адресс-бар (вверху) сбивает правильные вычисления.
А точной технологии так и не нашел.
Ответить с цитированием
  #5 (permalink)  
Старый 02.12.2015, 01:04
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 458

vettel, viewport:
window.innerHeight || window.document.documentElement.clientHeight
Ответить с цитированием
  #6 (permalink)  
Старый 02.12.2015, 13:39
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

Rise,
мне нужен вьюпорт, и window.innerHeight || window.document.documentElement.clientHeight
тоже не канает, выдает одно и то же значение, что и window.height() (разница в 1-2 пикселя), то есть со значительной погрешностью.
Ответить с цитированием
  #7 (permalink)  
Старый 02.12.2015, 13:44
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

Полазил по английскому нету немного, там тоже толком решения проблемы нет.
Но есть такой фикс, который хорошо работает под 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 где-то, хотя точного резалта все равно не будет. Это погрешность мобильных устройств.
Ответить с цитированием
  #8 (permalink)  
Старый 02.12.2015, 22:34
Аспирант
Отправить личное сообщение для vettel Посмотреть профиль Найти все сообщения от vettel
 
Регистрация: 07.05.2015
Сообщений: 43

Цитата:
вьюпорт так то это область просмотра без всяких тулбаров и тд...
Да, но Айфон этого не понимает, как и Андроид, из-за чего возникает погрешность.
Цитата:
Это же одно выражение...
Причем здесь выражение? Я же говорю, что и innerHeight, и documentElement.ClientHeight выдают одно и то же значение с погрешностями, я проверял.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отступ в зависимости от высоты окна браузера IndigoHollow jQuery 2 14.10.2015 11:57
FancyBox: Размер модального окна больше размеров окна браузера (высота), как сделать? clgs Events/DOM/Window 3 22.01.2015 17:13
Динамическое получение ширины и высоты окна браузера Esseron Элементы интерфейса 2 04.04.2011 16:00
Установить высоту таблици в зависимости от высоты окна браузера Fe_DoS Events/DOM/Window 9 25.01.2010 22:40
Определение активности окна браузера Dextrum Events/DOM/Window 2 23.07.2008 13:58