If I have a CSS media query as follows
<link rel="stylesheet" media="only screen and (max-width:1024px)" href="css/ipad.css">
<link rel="stylesheet" media="only screen and (min-width:1024px)" href="css/desktop.css">
I see that it loads both the CSS desktop.css and ipad.css
This is the case even if I change the min/max-width to min/max-device-width
Why is this so AND how do I ensure that only the relevant CSS gets loaded ?
I say, it's normal that the browser loads both files. But it should apply only one style. What happens to you, are both styles applied, or only one?
You could also work with the orentation parameter btw.
Related
I wan't to load the correct css file for any webpage based on the INITIAL window size.
I'm currently including files like so:
<link rel="stylesheet" media="(max-width: 1250px)" href="file1.css">
<link rel="stylesheet" media="(min-width: 1251px) and (max-width: 1700px)" href="file2.css">
<link rel="stylesheet" media="(min-width: 1701px)" href="file3.css">
This code loads the correct css on load, but it will also change according to screen resizes.
Is there a way native to CSS to prevent the responsize file change?
I can write a script to remove the unused queries once the initial CSS was loaded but I wanted to know if there's a more native way.
Thanks!
You can't. matchMedia JS property specially created for this. Using matchmedia you can execute blocks of JavaScript only when a certain mediaquery condition is met. For example:
if (window.matchMedia('(max-width: 1250px)')){
document.write('<link rel="stylesheet"
href="file1.css">');
}
Alright so I'm attempting to build a responsive design, and one of the things that needs to be done is to ignore an entire style-sheet for an image slider (as the one I'm using has fixed dimensions when using a particular theme).
So, is there any way to just ignore every css rule that's in that particular file?
The most simple way would be to not load the css on that page programmatically.
Otherwise you could specify the device or viewport width (whatever you use for sizing) to only load your stylesheet when the screen size matches.
Something like:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="alternate.css" />
Can't you just display:none on the sliders container on each media query you dont want it featured?
I'm working on making my current design responsive. I started out using #media screen... but nothing in the design would change. I attempted using the html, div, p, a, li, td { -webkit-text-size-adjust: none; } to see if that would at least help the fonts change sizes (I'm using em), but nothing changed.
Then I switched to <link type="text/css".... I currently have 3 media query files linked in my HTML document and I'm using HTML5/CSS3.
My question is: Why is the document only referencing the first file? I took out the core stylesheet and am using nothing but directly targeted sheets to see if that would stop it from just using the first stylesheet, but it hasn't. The fonts haven't resized. The containers won't resize. The images won't resize or remove. Only the first stylesheet is referenced - the others are ignored.
These are my current linked stylesheets:
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />
Edit: The stylesheet does change from one to the other, but the styles themselves don't change. It's like 1280 stylesheet is overridding all the others with its styles.
Maybe you're looking for max-width instead of max-device-width?
Former is for display area like the browser for example and the latter is the actual device area.
Also, you want to put the smallest one (800px in your case) at the end.
try this:
<link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />
How do you debug them?
Try resizing the browser, these should work.
Also, I really dont suggest to use 800px, as iPad will also fall in it, you are better of using 767.
I have two style sheets for one page.
<link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" />
<link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" />
I am testing on android and Iphone, and both seem to be picking up the "screen" style.
Is it better to use #media in one style sheet instead of using alternate sheets or am I doing something wrong.
I have checked the link and server directories to make sure the files existed and where linked properly.
iPhone's Mobile Safari doesn't consider itself of the "handheld" media type.
iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.
Source.
Instead, use media queries.
You have to load the handheld style AFTER your standard style. Otherwise everything from your mobile design will be overwritten.
So most of the time my stylesheets appear properly. The standard/original one always works flawlessly, however it seems sometimes the mobile one is disregarded when looked at from a mobile device
I have them designated as follows:
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />
I'm using a Droid X to view the page, in portrait mode, so the device width shouldn't be exceeding the max-width specified above, but sometimes, randomly, it still reverts back to the original css page.
Any way to keep it from doing so?
Make sure your standard.css isn't affecting the cascade of what you expect to see with the mobile.css. It looks as though a mobile device will load your standard.css first then the mobile.css - so styles in both stylesheets are affecting display. I usually wrap my stylesheet link elements in logic that only displays a mobile stylesheet to a mobile device - not both stylesheets at the same time.
Also, don't forget to include this meta tag to make sure your page is being scaled correctly to the device dimensions:
<meta name="viewport" content="width=device-width" />
Try using the media type "handheld".
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
Maybe use media="screen" for standard.css? Maybe it helps (:
Or check user-agent in server side. If it is mobile device loading only mobile css otherwise load standard.css.
I use WURFL to find out if it is mobile device...
I've see that happen before. I believe it was the size of the body element that was getting changed. The correct doctype is important. It should be:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">