Получение достоверной доступной ширины и высоты с помощью Javascript

фонПолучение достоверной доступной ширины и высоты с помощью Javascript

У меня возникли проблемы с получением надежного размера окна просмотра с помощью JavaScript. Я прочитал this guide, чтобы настроить приложение и this guide, чтобы узнать о таргетинге на определенные разрешения устройства.

Это <meta> тега на странице:

<!DOCTYPE html> 
... 
<meta name="viewport" content="target-densitydpi=device-dpi" />

Это позволяет мне использовать чёткое изображение, чтобы сделать интерфейс. Чтобы проверить разрешение я написал этот кусок кода:

window.addEventListener('orientationchange', function() { 
    console.log(screen.availWidth + ' x ' + screen.availHeight) 
} 
// 1080 x 1920 or 1920 x 1080

Проблема 1

Я надеялся, что фактические доступные пиксели могут быть рассчитаны как:

width := screen.availWidth/devicePixelRatio 
height := screen.availHeight/devicePixelRatio

Но devicePixelRatio фиксируется на 3, независимо от целевого значения dpi; так как я могу определить фактические пиксели в моем распоряжении?

Задача 2

выше screen.availHeight не является точным, поскольку он не учитывает фактическую высоту WebView компонента.

Я пробовал эти альтернативы:

console.log(document.documentElement.offsetHeight); 
// 1920 
console.log(window.innerHeight); 
// 240

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

источник

2013-04-19 Ja͢ck

Возможно, значения из jQuery width() и height() вернут правильные значения для вас? http://responsejs.com/labs/dimensions/ –

Hye jack, пожалуйста, дайте мне знать, как вы получили размер, который, наконец, работает для вас. Я также сталкиваюсь с той же проблемой. – virus

Прошло некоторое время с тех пор, как я работал с андроидным SDK и просмотром веб-страниц, , но не можете ли вы просто разоблачить информацию со стороны java, где вы можете ее надежно определить? Таким образом, в любое время ваша ориентация меняется + первоначально вы звоните

webview.loadUrl("javascript:setResolution(x,y,orientation)");

и в вашем JavaScript вы пишете размеры в логичном месте.

Это не кстати, что это было бы невозможно из JavaScript, но любое время мне нужно сделать что-нибудь отдаленно вдоль линий того, что вы хотите сделать, это занимает много проб и ошибок, чтобы получить его крест устройство поддерживается, поэтому лично я бы посоветовал вам использовать тот факт, что у вас есть веб-просмотр в ваших интересах. (И если вы случайно используете инфраструктуру webview, такую как cordova, вы можете даже относительно просто сделать из нее плагин javascript)

источник

2013-04-23 09:44:44

Спасибо. Эта мысль перешла мне в голову :), сказав это, она решает только одну из проблем; Другая проблема заключается в том, чтобы узнать, сколько «px» находится в вашем распоряжении на основе dpi. У вас есть решение для этого? –

Не можете ли вы просто использовать 'DisplayMetrics metrics = getResources(). GetDisplayMetrics();' и передать 'metrics.xdpi;' 'metrics.ydpi;' на ваш веб-просмотр, как описано выше? Однако если вы используете 'target-densitydpi = device-dpi', то это должно быть в основном бесполезным, кроме как для определения размеров« в реальной жизни ». Хотя, честно говоря, я не совсем уверен, какова ваша конечная цель. –

Или похоже, что вы хотите использовать 'metrics.widthPixels' и' metrics.heightPixels', жесткие, в конце концов, это одно и то же. –

Можете ли вы использовать мультимедийные запросы CSS для таргетинга на то, что вы хотите настроить?

Если да, может быть, вы сможете решить вашу проблему с помощью matchMedia.js - кросс-браузерного решения для тестирования медиа-запросов в JavaScript. Что-то рассмотреть, не так ли? Поскольку у вас есть, помимо запросов размера, -webkit-device-pixel-ratio в вашем распоряжении (упомянуто в этом руководстве, к которому вы привязались)?

источник

2013-04-25 15:35:03 davidtheclark

Получение достоверной доступной ширины и высоты с помощью Javascript

ответ

Смежные вопросы