Media Queries - CSS only for iPhone landscape
Yes, sure. Check: http://www.w3.org/TR/css3-mediaqueries/#orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
If you want to target iphone only you have to add the resolution or the dppx density to these MQ.
If I understand you correctly, and you want to know the media queries to target a smartphone like the iPhone only when it is held horizontally, try something like this:
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles go here */
body {
}
}
You could do this
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
That forces the iPhone to render viewport the same as the device width.
Then use this css to target the landscape mode, which is +320px
wide
@media screen and (min-width: 321px){
//styles
}