изменение области просмотра в зависимости от разрешения устройства

Question

Как изменить метапорт в зависимости от разрешения устройства? мы можем использовать медиазапросы для экранов с разным разрешением. Как настроить другое окно просмотра?

как мой демонстрационный сайт работает нормально в iPad с этим метатегом

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=1" />

но для iphone4 мне нужно это

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

Answer 1

//test for iOS retina display
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

Документы: http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

ОБНОВЛЕНИЕ:

После поиска минут я обнаружил, что jQuery может изменить метатег.

Попробуйте что-то вроде этого:

// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}