изменение видового экрана на основе разрешения устройства

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)"); 

Docs: http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

UPDATE:

Посмотрев на минуту, я обнаружил, что 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'); 
    } 
}