Orientation: Landscape

Hey guys,
Found so many tips on these forums, and now posting my first ask for advice.

I am trying to show a div on ‘iPhone landscape’ only. I have the below code working through chrome dev tools, but just not working live on my iPhone XR (ideally want to target all landscape iphones)

.landscapetwist { display: none; } @media only screen and (max-device-width: 812px) and (max-device-height: 674px) and (-webkit-device-pixel-ratio : 3) and (orientation: landscape) { .landscapetwist { display: block; } }

Thoughts any one


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Managed to work through this and used the below:

.landscapetwist { display: none; } @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { .landscapetwist { display: block; } }

Seams to working well across all modern iphones