how to target landscape mode in different mobile phones

Question

I'm trying to remove a javascript event only to mobile phones which are in landscape mode. I've tried using CSS media queries unsuccessfully, but I could not find a correct answer to this.

As an example, how to cover a code which detects landscape mode for at least iphone4 and Samsung Galaxy 3? Both are mobile devices but have different dimensions.

Is there a media query solution to target only landscape mobile devices?

Is there a javascript solution to target only landscape mobile devices?

Answer 1

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}