CSS Media Type: How to Load CSS for Mobile

CSS media type: How to load CSS for mobile?

Nokia N78 uses the S60 browser, which reads only "screen" stylesheets. It won't read the "handheld". It doesn't support media query. Instead of trying to type everything here, have a look at this article and you will solve the problem - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

How to load CSS just in mobile view?

The best way is to include the css file irrespective of whether a device is a mobile device or desktop device and then using media queries in the css file which works for mobile and desktop devices.

but if you still need the answer then there are two major methods to do this:

CSS WAY

Use the media property of link tag: (Remember this always loads the css but activates it only on screens having max width as 960px)

<link rel="stylesheet" href="style.css" media="only screen and (max-width: 960px)">

JAVASCRIPT WAY

Use a function to determine if a device is a mobile device and if yes then apply the css:

function isMobile(){
    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4)))
}
if(isMobile)
{
        var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}

Screen and Mobile Stylesheets

According to documents, syntax of loading another file in specific device/condition is like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

This will load only one css file for every single amount of width

For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved

<meta name="viewport" content="width=320">

This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.

HTML | Mobile and CSS media types

Yes most phones even more so the older ones will simply ignore the "media" type and I would suggest using some from of server side detection if you need the css to be different on different phone types.

Load mobile CSS if user is on Android

You should just be able to add

|| (navigator.userAgent.match(/Android/i))

to the second if statement, so

if( (navigator.userAgent.match(/iPhone/i)) || 
    (navigator.userAgent.match(/iPod/i)) || 
    (navigator.userAgent.match(/Android/i)) ) 

How to detect ONLY with CSS mobile screens

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
    /* Styles */
}
    
@media only screen and (max-device-width: 768px) {
    /* Styles */
}

Earlier post:
How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS Media Query Import for mobile

Yes, that is correct, and no, you're not doing anything wrong that I can tell. I think you're overthinking it (and you really don't need the min-width on the second import).

If you haven't already, read Ethan Marcotte's Responsive Web Design.

---

Related Topics