0

I would like to know if I use 3 different css files, will the mobile browser of the iPhone / iPad download all 3 sets of css files, or just the one that is relevant by screen size? by using this.

<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">

I've found the answer to use from http://www.w3schools.com/html5/html5_app_cache.asp

even if you have 3 different css files for the mobile, having css stored to the iphone, will minimize bandwidth to only 1 download of each css and this will speed up the website while using less bandwidth.

create a .htaccess file and place this in.

AddType text/cache-manifest manifest

then create another file called what ever u like demo.manifest and place in

CACHE MANIFEST 
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css

then on the html page you have to declare it by doing this.

<html manifest="demo.manifest">

once you update the css and files, you will just need to update the demo.manifest and the browser with download the new version of demo.manifest and all of its contents once more.

Improve this question
4
  • I think the screen size depends on the settings of the actual page. I.e., if the page has the style "first.css" and it's for mobile devices, it will read that. Btw, it downloads all the 3 files. Commented Jul 3, 2012 at 18:35
  • It depends on the methods you use to supply the the three stylesheets and the particular browser in question. Commented Jul 3, 2012 at 18:38
  • I think you should have asked yourself a different question: how on earth would you associate a given CSS file with a given screen size? HTML itself has no means for doing that! You need to use PHP / Javascript to engage in that kind of conditional logic. As a side note, I tend to prefer to create one 'mobile friendly' page and let the mobile device handle adapting the layout rather than programing to every single type of device. Commented Jul 3, 2012 at 18:38
  • 1
    @RonLugge, I use <link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet"> to define the css, and <link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet"> to define it in landscape. Commented Jul 3, 2012 at 19:49

3 Answers 3

Reset to default
9

Here are the media queries of standard devices (from CSS-Tricks.com):

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.

**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this is just want I wanted, a list of all the dimensions, thankyou.
Great snippet of codes. How would I use the second version from the code above to check if it's (IE10 || Other Browser) or (LESS THAN IE10) if it's Desktops and laptops?
1

If you call them all, they'll all be loaded. The best plan is to use media queries to separate but serve all the styles in one sheet.

Improve this answer

2 Comments

I am using <link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet"> will that be the only css loaded if viewed on the iphone in portrait view?
Browsers aren't consistent on this - see: stackoverflow.com/questions/6311235/…
0

It will download all of them, unless you create some javascript to prevent that.

Improve this answer

2 Comments

so it will download all the css?
Yes, unless you prevent it from doing so.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.