iPhone and iPad handle web pages extremely well but with a little additional styling and thought the user experience can be further improved.
The original Media Rule was for handheld devices.
<link href="stylename.css" rel="stylesheet" media="handheld" type="text/css" >
This rule was not intended for high end web content so is ignored by iOS. To get around this you need to use a rule that defines the max-device-width for iOS, like this.
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
Two important things happen in this rule
1. The keyword "only" before "screen" means only iOS devices use this Style Sheet.
2. max-device-width: 480px includes the latest Retina displays in the iPhone and iPod touch even though you would expect to have to put 960px. Why? I have no idea, ask Apple.
This rule targets the iPhone and the iPod Touch.
As usual Internet Explorer can be troublesome so to stop it from using this style we need to wrap it in a Conditional Comment. Like this.
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
Some people may find the Conditional Comment confusing because it says [if !IE], because no version of Internet Explorer is stipulated (e.g. IE6) no version of Internet Explorer matches so no version of Internet Explorer uses it.
You use two style sheets (or more) the first is read by all devices the second is only read by devices meeting the rule. The code would look like this in the head of the page.
<link href="main.css" rel="stylesheet" type="text/css">
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet">
<!--<![endif]-->
This would look like this in the Flux Styles window.
The visual representation of the styles in Flux works like reading a page, the top first and bottom last. The first style sheet main.css is used on any device the second style sheet iphone.css is only used by the iPhone and iPod Touch and can change any style that needs to be different for that device. Only the style attributes that need to be different need to be added. Just use the same style names, the preceding style in main.css can have any attribute changed in iphone.css.
A similar approach can be used if you want a page to print differently, you can hide navigation, drop background colours and link text colour as these may make little sense when printing.
By changing the rule and using max width you can have a page that changes style depending on the size of the window it is opened in.
Flux displays the media type associated with a Style Sheet.
If you right click this you get the option to add to or change a media type.
For a media type that does not display on the screen you are using all you need to do is temporarily add "screen" to the media type so it displays then remove it once you have finished editing.
Using small screens conventional page layout can have the viewer scrolling from side to side to read text. With a little thought and a flexible layout the small screen user experience can be much improved. Taking a standard 3 column layout where the columns are floated, by removing the float each column can be displayed inline. Images can be made smaller and displayed inline. Navigation can stack instead of across the page. Just by changing the styles not the content. Designing Flexible content is now important so that every user gets the best experience possible.
Apple touch devices use a double tap to zoom in when browsing, setting your content out in containers much improves how well this works.
Because content is scaled to fit the screen of an iOS device you may wish to scale text across the page. To do this use this style.
-webkit-text-size-adjust:200%
By placing in the body style for your page you can scale all text.
Order matters, set the main styles first then override for a specific device.
Far more information can be found in the Apple Developer Library.