Определение размера мобильного экрана/видимости - Javascript

Question

Я хочу сообщить размер экрана мобильного устройства и обновить изменение ориентации, но я получаю всевозможные странные ошибки, например. ширина почти всегда 980px.

Это прекрасно работает на рабочем столе при изменении размера, но не мобильный (отчетный пейзаж или портрет прекрасно, хотя)

Пробовал на Ipad, Samsung Галактики Tab, Google Nexus телефон и iphone 4

Вот что я используя:

// get dimensions 
_getScreenWidth = function() { 
    var screenWidth = window.innerWidth; 
    var screenHeight = window.innerHeight; 
    var el = document.getElementById('dimensions'); 
    _handleOrientation(); 
    el.innerHTML = 'Width: '+screenWidth +' :: Height: '+screenHeight + "<br /><br />" + _doc_element.className; 
}; 

// portait or landscape 
_handleOrientation = function() { 
if (device.landscape()) { 
    _removeClass("portrait"); 
    return _addClass("landscape"); 
} else { 
    _removeClass("landscape"); 
    return _addClass("portrait"); 
} 
}; 

// resize event 
var resizeTimeout; 
window.onresize = function() { 
    clearTimeout(resizeTimeout); 
    // handle normal resize 
    resizeTimeout = setTimeout(function() { 
    _getScreenWidth(); 
    }, 250); // 250ms delay 
} 

Answer 1

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

Answer 2

Я не уверен, что должно быть device.landscape(), но объект device не существует, по крайней мере, не в стандартных браузерах.

всякие странные ошибки

В моем случае, это было из-за неопределенных _addClass и _removeClass функций, _doc_element объект и, как упоминалось выше, device.landscape().

Чтобы исправить device.landscape(), вы можете определить пейзаж как режим, в котором ширина> высота. Тогда это просто простое сравнение:

isLandscape = function() { 
    return window.innerWidth > window.innerHeight; 
} 

Вот example on jsfiddle со всеми ошибками фиксированной. Протестировано на iPhone 6, и он устанавливает правильные классы.