jquery - 元视口(viewport)影响 jQuery？

Question

所以我目前正在尝试针对移动设备优化我的博客。 我选择了为窗口宽度小于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 像素的任何设备上显示我网站的桌面版本，完全缩小并为每个窗口宽度 <768 像素的设备加载 mobile.css。

Answer 1

您可以使用您的视口(viewport)

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

与 CSS 媒体查询一起定位特定的视口(viewport)大小。附加的 JSFiddle 可以实现您想要实现的目标，而无需使用 Javascript:http://jsfiddle.net/3muzkfdt/

调整结果 Pane 的大小以查看使用不同 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