iPad css orientation
i want to test the orientation by using css for ipad.This is the css file i use
@media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
@media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
I am not sure whether this will work or not. I tried testing in an iphone emulator by changing the device width to 320px.But it didn't work. Do i need to change anything in this css file? This is how i call the css in the main page
<开发者_如何学编程;link rel="stylesheet" type="text/css" href="iPad.css" />"
This is what I use for calling stylesheets with landscape and portrait stylesheets:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">
I also found this link for you which is pretty helpful:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
I resolved the problem by using this css.
@media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
@media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
精彩评论