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.

4Rabbits
  • 27
  • 1
  • 1
  • 5
  • 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. – Phillip Jul 03 '12 at 18:35
  • It depends on the methods you use to supply the the three stylesheets and the particular browser in question. – Quentin Jul 03 '12 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. – RonLugge Jul 03 '12 at 18:38
  • 1
    @RonLugge, I use to define the css, and to define it in landscape. – 4Rabbits Jul 03 '12 at 19:49

3 Answers3

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 */
}
Mike Legacy
  • 1,056
  • 1
  • 10
  • 24
  • this is just want I wanted, a list of all the dimensions, thankyou. – 4Rabbits Jul 03 '12 at 19:56
  • 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? – Si8 Mar 03 '14 at 16:31
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.

Dave Everitt
  • 17,193
  • 6
  • 67
  • 97
  • I am using will that be the only css loaded if viewed on the iphone in portrait view? – 4Rabbits Jul 03 '12 at 18:40
  • Browsers aren't consistent on this - see: http://stackoverflow.com/questions/6311235/why-do-all-browsers-download-all-css-files-even-for-media-types-they-dont-sup – Dave Everitt Jul 16 '12 at 21:36
0

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

dezman
  • 18,087
  • 10
  • 53
  • 91