Consider using
@media only screen
and (min-device-width : 320px)
and (max-device-width : 667px),
(orientation : landscape) {...}
Description
This code snippet utilizes the 'and' keyword to combine various media features and types within a media query.
@media only screen
and (min-device-width : 320px)
and (max-device-width : 667px)
and (orientation : landscape) {...}
The provided media query will be activated if the device type is screen, the viewport width falls between 320px and 667px, and the orientation is landscape.
In media queries, a list separated by commas functions similarly to the logical 'or' operator. If any of the media queries in a comma-separated list are true, the associated styles or style sheets will be applied. Each query in the list is treated independently, so operators used in one query do not affect the others. This allows for targeting different media features, types, and conditions with comma-separated media queries.
@media only screen
and (min-device-width : 320px)
and (max-device-width : 667px),
(orientation : landscape) {...}
In this example, if the screen device has a viewport width between 320px
and 667px, the first part of the media statement, '@media screen and (min-device-width: 320px) and (max-device-width: 667px)', would return true. Even if the device fails the landscape orientation check in the second query, the overall statement would still be true. Similarly, if the device is in landscape mode with a viewport width of 800px, the first query would fail due to the viewport width, but the second query would succeed, resulting in the entire media statement being true.
Source