ipad to create a simple demo target CSS page

Translated from: IPad Orientation CSS

When the ipad is finally released, Jason Grigsby has done a useful experiment in distinguishing between the ipad and the Safari browser in the iphone.

For the most part, the mobile version of Safari on the ipad is the same thing as on the iphone. One difference I've found is that the WebKit on the ipad supports orientation (orientation) based CSS Media query statements.

I created a simple page to demonstrate the target CSS for the ipad.

Using orientation in CSS is very simple, and the code does this:

<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" >
<link rel= " Stylesheet "Media=" All and (Orientation:landscape) "href=" Landscape.css ">

In this example, the only difference in the two CSS files is to hide one of the headings. The HTML portion of the demo page is as follows:

<H1 id= "Portrait" >you ' re viewing in Portrait mode
 
portrait.css in the CSS is simply hiding the landscape part of the <H1>:
 
#landscape {Display:none}
 
Of course, the role ofLandscape.css is the opposite.
 
You can see this CSS query in the latest version of Safari/chrome and Firefox. Simply change the window size of your browser so that its height is greater than the width, and you can see the effect.