根据 jQuery Mobile 中的设备/屏幕分辨率更改元视口答案

【问题标题】：Changing meta viewport depending on device/screen resolution in jQuery Mobile根据 jQuery Mobile 中的设备/屏幕分辨率更改元视口
【发布时间】：2013-03-04 11:47:46
【问题描述】：

我想改变我的视口：

<meta name="viewport" content="user-scalable=no">

收件人：

<meta name="viewport" content="width=device-width, initial-scale=1">

基于设备屏幕。第一个示例非常适合 iPad，但在 iPhone 上，我有一个我想要启动的响应式样式表。

我已经尝试过我从这个问题修改过的这个 sn-p。 changing viewport based on device resolution

// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}

【问题讨论】：

标签： jquery-mobile media-queries viewport

【解决方案1】：

我想通了。问题出在我的媒体查询上。它应该是 max-device-width，而不是 min-width 或 max-width。

// Check for device screen size
if($.mobile.media("screen and (max-device-width: 480px)")) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}

【讨论】：