根据设备分辨率更改视口 [英] changing viewport based on device resolution

问题描述

如何根据设备分辨率更改元视口?我们可以使用媒体查询来针对不同分辨率的屏幕，如何设置不同的视口?

How to change the meta viewport based on device resolution? we can use media queries to target different resolution screens how can set different viewport?

就像我的演示站点一样，使用此meta标签在iPad上也可以正常工作

like my demo site works ok in iPad with this meta tag

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

但是对于iphone4，我需要这个

but for iphone4 I need this

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

推荐答案

//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可以更改meta标签.

After looking for a minute I found the jQuery can change the meta tag.

尝试这样的事情:

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

这篇关于根据设备分辨率更改视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！