影响jQuery的元视口？

所以我目前正在努力优化我的博客移动。我选择了为窗口宽度小于768像素的设备添加额外CSS文件的方式。桌面模式下，我的页面宽度为1022像素，移动版本的宽度为流动宽度。影响jQuery的元视口？

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

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像素的任何设备上显示我的站点的桌面版本完全缩小并为每个设备窗口宽度加载mobile.css < 768像素。

来源

2012-12-26 ProblemsOfSumit

您可以使用视

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

旁边CSS媒体查询针对某些视大小。附加的JSFiddle可以完成您无需使用Javascript即可实现的功能：http://jsfiddle.net/3muzkfdt/

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

如果你想模块化的成mobile.css和desktop.css的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-12 15:52:37

影响jQuery的元视口？

回答

相关问题