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

您可以使用视口

<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

meta视口影响jQuery？

1 个答案: