2

所以我目前正在尝试优化我的移动博客。我选择为窗口宽度小于 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。

4

1 回答 1

0

您可以使用您的视口

<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

于 2014-09-12T15:52:37.950 回答