如何避免加载CSS文件为ipad大小的设备（'移动和全尺寸之间）？ [英] How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

问题描述

我有一个应用程序，在屏幕上有一个很好的看法，但有一个僵硬的框架，使得难以使用它在手机和类似的..所以我做了一个特定的CSS文件，以适应这些设备。没关系，我使用定义一般查看（适用于所有媒体）的 main.css 和修改此类设备的 handheld.css 文件：

 < link rel =stylesheetmedia =alltype =text / csshref =main.css/> ; 
< link rel =stylesheetmedia =handheld，tvtype =text / csshref =handheld.css/>问题是，像iPad这样的设备有一个伟大的外观与一般的屏幕版本，并且' t需要降级像在一些手机。所以我把我的应用程序的链接设置一个cookie，强制显示像在桌面屏幕。问题是我不知道如何强制不加载 handheld.css 。 Javascript可能是？但是，如何？
解决方案
我认为你要找的是媒体查询。这不会解决你的问题，但它是如何解决更大的问题（布局响应不同的屏幕尺寸）在未来如何。 
 
 示例： 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  value ...我很惊讶。
 < link rel =stylesheettype = text / csshref =id =cssSwitch/> 
  
然后使用一些按钮来更改css ...或任何你想要的
 < input type =buttonid =enableMobilevalue =mobile css/> 
< input type =buttonid =enableMainvalue =main.css/> 
  
然后，在您的代码中：
  $（＃enableMobile）。on（click，function（）{
 $（＃cssSwitch）。attr（href，handheld.css ）; 
}）; 
 
 $（＃enableMain）。on（click，function（）{
 $（＃cssSwitch）。attr（href，main.css） ; 
}）; 
  
令我吃惊的是，它实际工作。
 
 
 
 测试并工作 b $ b 
 
 
 IE（8）
 
 
 Chrome（15）
 
 
 FireFox 
 
 
 Android Samsung Galaxy S（默认浏览器）
 
 
 
I have an application that has a good look on screens, but has a rigid framework that makes difficult to use it in mobiles and similar.. So I've made an specific CSS file to fit these devices. That's ok, I use a main.css that defines general looking (for all media) and a handheld.css file that makes corrections for this kind of devices:
<link rel="stylesheet" media="all" type="text/css" href="main.css" />
<link rel="stylesheet" media="handheld,tv" type="text/css" href="handheld.css" />
The problem is that some devices like an iPad have a great looking with the general screen version and don't need to downgrade like in some mobiles. So I have put in my app a link that sets a cookie that forces to display like in a desktop screen. The problem is I don't know how to force to not load handheld.css. Javascript may be? But, how?
解决方案
I think what you're looking for is media queries. This won't solve your question, but it is how you should go about solving the bigger problem (layout responding to different screen sizes) in the future. 

Example: http://www.barackobama.com/ (resize the width of page to see what it does)
 
Learn how:
 
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/

To solve your specific problem, read below:

working example of website with css stylesheet switching: 

http://jsfiddle.net/y6FWK/2/

This is something new to me... Wasn't expecting it to work so easily, but, since the <link> is just another dom element, you can just refer to it (easiest to give it an id) and simply change it's href value... I was surprised.
<link rel="stylesheet" type="text/css" href="" id="cssSwitch" />
Then some buttons to change the css... or whatever you'd like
<input type="button" id="enableMobile" value="mobile css" />
<input type="button" id="enableMain" value="main.css" />
Then, within your code:
$("#enableMobile").on("click", function(){
    $("#cssSwitch").attr("href", "handheld.css");
});

$("#enableMain").on("click", function(){
    $("#cssSwitch").attr("href", "main.css");
});
To my surprise, it actually worked.

Tested and worked in


IE (8)
Chrome (15)
FireFox
Android Samsung Galaxy S (default browser)


                        
这篇关于如何避免加载CSS文件为ipad大小的设备（'移动和全尺寸之间）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！