programming4us
 
 
 
Programming

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

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
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)
 
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Video Sports
- The Banner Saga 2 [PS4/XOne/PC] PC Launch Trailer
- Welkin Road [PC] Early Access Trailer
- 7th Dragon III Code: VFD [3DS] Character Creation Trailer
- Human: Fall Flat [PS4/XOne/PC] Coming Soon Trailer
- Battlefleet Gothic: Armada [PC] Eldar Trailer
- Neon Chrome [PS4/XOne/PC] PC Release Date Trailer
- Rocketbirds 2: Evolution [Vita/PS4] Launch Trailer
- Battleborn [PS4/XOne/PC] 12 Min Gameplay Trailer
- 7 Days to Die [PS4/XOne/PC] Console Trailer
- Total War: Warhammer [PC] The Empire vs Chaos Warriors Gameplay Trailer
- Umbrella Corps [PS4/PC] Mercenary Customization Trailer
- Niten [PC] Debut Trailer
- Stellaris [PC] Aiming for the Stars - Dev. Diary Trailer #1
- LawBreakers [PC] Dev Diary #4: Concept Art Evolutions
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS