device-aspect-ratio is deprecated

Question

for only identifying iPhone 5 device, I'm specifying css query with device-aspect-ratio.

@media screen and (device-aspect-ratio: 2/3) {
// Styles will be applied only to iphone 5
}

But now i can see usage of device-aspect-ratio is not recommended anymore. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-aspect-ratio#browser_compatibility

to avoid using device-aspect-ratio, i tried some other approaches

@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape) {
// Styles will be applied to all devices [iphone 6/7/8....]
}

The problem is, the styles is getting applied to other phone devices[iphone 6/7/8/x/12/13..] which have large screen sizes.

Is there any better approach to put my styles only for iphone 5 device landscape mode.

Answer 1

You can use aspect-ratio, with min-|max- prefixes, please, take a look on this docs.