影响jQuery的元视口？答案

【问题标题】：meta viewport affecting jQuery?影响jQuery的元视口？
【发布时间】：2012-12-12 07:18:43
【问题描述】：

所以我目前正在尝试针对移动设备优化我的博客。我选择为窗口宽度小于 768 像素的设备添加额外的 CSS 文件的方式。我的页面在桌面模式下为 1022 像素宽，而移动版则具有流畅的宽度。

所以我在头部的代码是这样的：

var mobileSite = false;
if($(window).width() < 768) {
    mobileSite = true;
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />');
}

到目前为止，它就像一个魅力。接下来是阻止 iPad（尚未在 Andriod 上测试）放大内容部分。在任何一种模式下，iPad 都应该显示整页而不放大。所以我添加了这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

没有成功。据我了解，width=device-width 是告诉浏览器页面的大小，所以浏览器知道它应该缩小多远。我试过initial-scale=0.7这有帮助，但我想那只是针对我尝试过的特定设备，即 iPad 2。所以我尝试了width=1022 这有帮助 - iPad 默认显示整页而不放大。但副作用是其他移动设备（如 iPhone 或 Lumia 920）不再加载移动 CSS，这很奇怪我。但我认为我可以为我的网站的移动和桌面版本使用特定的元数据：

var mobileSite = false;
if($(window).width() < 768) {
    mobileSite = true;
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />');
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />');
} else {
    $('head').append('<meta name="viewport" content="width=1022, initial-scale=1.0, maximum-scale=1.0" />');
}

这里的效果相同。移动版不再加载。所以没有添加mobile.css。

问题出在哪里？

我想要什么：在窗口宽度大于 768 像素的任何设备上显示我的网站的桌面版本，完全缩小并为每个设备窗口宽度

【问题讨论】：

标签： jquery viewport meta

【解决方案1】：

你可以使用你的视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

与 CSS 媒体查询一起以特定视口大小为目标。附加的 JSFiddle 无需使用 Javascript 即可完成您想要实现的目标：http://jsfiddle.net/3muzkfdt/

调整结果窗格的大小以使用不同的 CSS 查看页面。

如果您希望将 CSS 模块化为 mobile.css 和 desktop.css，只需按如下方式导入 CSS：

@media (max-width: 768px){
   @import 'mobile.css';
}

@media (min-width: 769px){
   @import 'desktop.css';
}

有关媒体查询及其使用的更多信息，请参阅 MDN：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：