CODEWITHSUNDEEP
iphonehtmlweb
4Rabbits
4Rabbits

Reputation: 27

Creating a mobile web page with different css style

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.

Upvotes: 0

Views: 10346

Answers (3)

Mike Legacy
Mike Legacy

Reputation: 1066

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 */
}

Upvotes: 9

Dave Everitt
Dave Everitt

Reputation: 17876

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.

Upvotes: 1

dezman
dezman

Reputation: 19358

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

Upvotes: 0

Related Questions