I have a website that looks great on desktop and Android devices, but some of the CSS (eg background-attachment:fixed
with background-size:cover
) is not "compatible" with iOS devices (and in particular iPhone).
I have found an alternative so that it at least doesn't look bad on iPhone, and I add it using media queries as follows:
@media all and (max-width:414px) {
.panel {
background-attachment:scroll;
}
}
Those styles will be applied only to devices with a maximum width of 414px (iPhone 7 plus and below)... but I find that then they will also be applied to Android devices where the code worked correctly without using that alternative.
Is there a way to detect with CSS if the device is iOS to add that rule exclusively in that case?
These media queries only apply to iPhone.
iPhone 4 and 4s
iPhone 5, 5s, 5c and 5se
iPhone 6, 6s, 7 and 8
iPhone 6+, 7+ and 8+
iPhone X
Source: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can see more devices.