I'm having a different design on my website for mobile, tablet and desktop. I'm using mediaquery to hide/show the div. Everything working fine in portrait mode. How can I handle this in landscape mode? Mobile phones are taking up the tablet design due to increased width pixels in landscape mode.
As per the answer at: https://stackoverflow.com/a/5735636/5580153
CSS to detect screen orientation:
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation
Further discussion of the limitations of this solution can be found here, primarily that the soft keyboard can break the layout:
CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?
You should consider factoring in a combination of min-max pixel restrictions combined with orientation, as more recent comments point out. The w3 article is still a good source of information however.