Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Send the Right CSS to Target the iPhone

Since CSS version 2, it’s been possible to create styles specifically targeted to different devices by changing the media type. For example, it’s common to create a special style sheet for printers that removes background images and other design elements that can make a page difficult to read when it’s printed.

CSS 3 takes this idea a step further, making it possible to target the iPad and iPhone in the portrait and landscape orientations. The Jelly Rancher site used here as an example includes two sets of styles: One set of styles works well in the latest desktop browsers, and the additional style sheets are designed for the iPhone and iPad.

Here you see the result of using two styles sheets to cause the same HTML page to display differently in landscape and portrait modes.

image0.jpg

This site was started by creating one style sheet designed for desktop browsers that named main.css. That style sheet is linked to the page with the following code:

<link href="css/main.css" rel="stylesheet" type="text/css" />

Next links were added to the style sheets that were created for the landscape and portrait modes on the iPad and iPhone. Note that CSS 3 doesn’t specifically include a way to target the iPad or iPhone, but you can use CSS 3 to target any screen size.

Thus, the sites targeted the iPhone and iPad by specifying maximum and minimum widths that equal the size of each device. To further distinguish styles sheets, the orientation was added to identify which style sheet should be applied by the browser when the device is in portrait or landscape mode.

Here are the links to the two style sheets for the iPad:

<!--iPad portrait →
<link href="css/ipadP.css" rel="stylesheet" media="only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait)">
 
<!--iPad landscape →
<link href="css/ipadL.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">

Notes are included in the code between comment tags <!-- --!> to make it easy to identify the different style sheets in the HTML. For example, the line <!--iPad portrait → in the preceding code is an optional comment. It isn’t read by a browser, because it’s included in the comment tags.

Here are the links to the two style sheets for the iPhone:

<!--iPhone portrait →
<link href="css/iphoneP.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)">
 
<!--iPhone landscape →
<link href="css/iphoneL.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)">
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!