如何避免为ipad大小的设备('在'移动和全尺寸之间')加载CSS文件？

Question

我有一个在屏幕上看起来很好看的应用程序,但是有一个严格的框架,很难在移动设备和类似设备中使用它.所以我已经制作了一个特定的CSS文件来适应这些设备.没关系,我使用main.css定义一般外观(适用于所有媒体)和一个handheld.css文件,它可以修正这类设备:

<link rel="stylesheet" media="all" type="text/css" href="main.css" />
<link rel="stylesheet" media="handheld,tv" type="text/css" href="handheld.css" />

问题在于,像iPad这样的设备具有普通屏幕版本的漂亮外观,并且不需要像某些手机那样降级.所以我在我的应用程序中添加了一个链接,该链接设置了一个强制显示在桌面屏幕中的cookie.问题是我不知道如何强制不加载handheld.css.Javascript可能是？但是,怎么样？

Answer 1

我认为您正在寻找的是媒体查询。这不会解决您的问题，但这是您将来应该如何解决更大的问题（布局响应不同的屏幕尺寸）。
示例：http://www.barackobama.com/（调整页面宽度以查看其作用）
了解操作方法：
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3 -media-queries-to-create-a-mobile-version-of-your-website/
http://www.vanseodesign.com/css/media-queries/
http://www.adobe.com/devnet/dreamweaver /articles/introducing-media-queries.html
http://designmodo.com/media-queries/

要解决您的具体问题，请阅读以下内容：
具有 css 样式表切换的网站的工作示例：
http://jsfiddle.net/y6FWK/2/

这对我来说是新的东西......没想到它能如此轻松地工作，但是，由于这<link>只是另一个 dom 元素，你可以引用它（最简单地给它一个 id）并简单地更改它的href值.. 。 我很惊讶。

<link rel="stylesheet" type="text/css" href="" id="cssSwitch" />

然后是一些更改 css 的按钮...或者任何你想要的

<input type="button" id="enableMobile" value="mobile css" />
<input type="button" id="enableMain" value="main.css" />

然后，在您的代码中：

$("#enableMobile").on("click", function(){
    $("#cssSwitch").attr("href", "handheld.css");
});

$("#enableMain").on("click", function(){
    $("#cssSwitch").attr("href", "main.css");
});

令我惊讶的是，它确实有效。

测试并工作于

• IE (8)
• 镀铬 (15)
• 火狐
• Android 三星 Galaxy S（默认浏览器）