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');
    }
}

根据设备分辨率更改视口

1 个答案: