как определить размер видимой области мобильного браузера ?
 

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

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

попробуйте так:

var visibleWidth = document.documentElement.clientWidth;

<meta name="viewport" content="width: device-width; user-scalable: no; max-scale: 1; initial-scale: 1;">
<script>
window.onload = function() {
alert(window.innerWidth);
}
<script>

Писал с телефона, так что могут быть ошибки.

window.innerWidth это я знаю

но оно в разных браузерах показывает разное значение.
судя по всему виртуальный вьюпорт .

и меня интересует высота, потому что в css почему-то если ставишь 100% , он все равно не растягивается на всю высоту.

mitiya,
Я тебе написал как установить viewport для всех. Если размер отличается, значит так и должно быть.

mdpi, hdpi - 320px
xhdpi - ~360px в зависимости от браузера
iphone all - 320px
ipad all - 1024px
other tablets - (deviceResolution / devicePixelRatio)px

В любом случае, даже без viewport если вы ставите в css 100% то высота будет 100%. Не на все контейнеры значит поставили, если это не так.