Programming4us
         
 
 
Programming

CSS for Mobile Browsers : Where to Insert the CSS (part 2) - Media queries

12/12/2010 3:30:30 PM
1.2. Media queries

CSS3 comes to our help with media queries. These complex media definitions include conditions about the screen size and media values allowed.

For example, we can say: “Apply this stylesheet for devices supporting only screen and with a maximum device width of 480.” This will apply to an iPhone, because in landscape mode it has a screen width of 480px and it doesn’t support print, handheld, or any other media type. Here’s how to write this as a conditional media query:

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:
480px)" href="iphone.css" />

We can then target non-iPhone desktop devices with a filter saying: “Apply this stylesheet for browsers supporting at least screen and with a minimum device width of 481.” This query is written as follows:
<link media="screen and (min-device-width: 481px)" href="notiphone.css"
type="text/css" rel="stylesheet" />


Warning:

Internet Explorer (through version 8) does not understand CSS media queries, so it will apply the iPhone stylesheet by default. That is why we need to add IE conditional comments:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only
screen and (max-device-width: 480px)"
href="iphone.css" />
<!--<![endif]-->


Some browsers also understand CSS media queries inside the same stylesheet file. For example, the following code will change the background color displayed on an iPhone (and other similar devices):

@media only screen and (max-device-width: 480px) {
body {
background-color: red;
}
}

An extension for conditional media queries is the orientation media query, which allows us to define different styles for different orientations. There are two possibilities: orientation:portrait and orientation:landscape. For a device running iOS 3.2 or later, you can use the orientation media query as follows:

<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="port.css" />


iPhone 4 and Pixel-Ratio

iPhone 4 comes with a 326-DPI screen, twice the original iPhone screen. This means that this new device has double width, double height in the same physical screen size. That is why Apple decided to give its browser the same CSS, viewport, and JavaScript dimensions as the low-DPI device, 320×480, and created a pixel-ratio of 2. This means that for every pixel, four real pixels will be drawn (a 2× zoom). Therefore, your website will render equally in iPhone 3GS or iPhone 4 beyond the clearer text. If you still want to show something different for iPhone 4 (as a high-DPI image) you can use the new media query condition -webkit-min-device-pixel-ratio:

<link media="all and (-webkit-min-device-pixel-ratio:2)"
href="iphone4.css" type="text/css" rel="stylesheet" />


The orientation query also works in Android from 2.0, in MicroB for MeeGo devices like the Nokia N900, and in Firefox Mobile. Table 2 provides a more complete list of browser compatibility for CSS media queries and the orientation extension.

Table 2. CSS3 conditional media queries compatibility table
Browser/platformConditional media queries compatibilityOrientation support
SafariYesYes, from OS 3.2
Android browserYesYes from 2.0
Symbian/S60Yes from 5th edition No before 5th editionNo
Nokia Series 40Yes from 6th edition No before 6th editionNo
webOSYesNo
BlackBerryNoNo
NetFrontNoNo
Openwave (Myriad)NoNo
Internet ExplorerNoNo
Motorola Internet BrowserNoNo
Opera MobileYesNo
Opera MiniYesNo

Other -----------------
- Developing an SEO-Friendly Website : Keyword Targeting (part 4)
- Developing an SEO-Friendly Website : Keyword Targeting (part 3)
- Developing an SEO-Friendly Website : Keyword Targeting (part 2)
- Developing an SEO-Friendly Website : Keyword Targeting (part 1) - Title Tags
- The Art of SEO : Optimization of Domain Names/URLs
- Cloud Security and Privacy : Regulatory/External Compliance (part 2)
- Cloud Security and Privacy : Regulatory/External Compliance (part 1)
- Developing an SEO-Friendly Website : Root Domains, Subdomains, and Microsites (part 2)
- Developing an SEO-Friendly Website : Root Domains, Subdomains, and Microsites (part 1)
- Parallel Programming with Microsoft .Net : Parallel Aggregation - An Example
- Parallel Programming with Microsoft .Net : Parallel Aggregation - The Basics
- Developing an SEO-Friendly Website : Creating an Optimal Information Architecture (part 4)
- Developing an SEO-Friendly Website : Creating an Optimal Information Architecture (part 3)
- Developing an SEO-Friendly Website : Creating an Optimal Information Architecture (part 2)
- Developing an SEO-Friendly Website : Creating an Optimal Information Architecture (part 1)
- Cloud Security and Privacy : Governance, Risk, and Compliance (GRC)
- Cloud Security and Privacy : Internal Policy Compliance
- jQuery 1.3 : Improving a basic form (part 8) - Checkbox manipulation
- jQuery 1.3 : Improving a basic form (part 7)
- jQuery 1.3 : Improving a basic form (part 6)
 
 
Most View
- SQL server 2012 : T-SQL Enhancements - Table-Valued Parameters (part 1)
- Windows Server 2008 : Configuring Server Storage (part 3) - Configuring a Mount Point
- Windows Phone 7 : Fixing Mistakes
- .NET Components : Serialization and Class Hierarchies (part 1) - Custom Serialization and Base Classes
- Windows 7 : Configuring the Fax Service
- BizTalk 2009 : Using XML Namespaces (part 2) - Using Port Filters and Content-Based Routing
- jQuery 1.3 : AJAX - Passing data to the server
- Exchange Server 2010 : Managing Web and Mobile Access (part 3) - Throttling Client Access, Configuring URLs and Authentication for the OAB
- Windows Server 2008 : Determine Which Terminal Services Roles to Install
- Windows Azure: Building a Secure Backup System (part 5)
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS