Reply To: parallax on mobile

[rkieru]

Like I said… it’s a nightmare on Mobile. Worse yet is trying to test it in faux-mobile settings like “Responsive Design View”. Safari, for example, is notorious for ignoring media queries even in RDV.

The solution I ended up having to use on this site was so inelegant that if I have any say in the matter, I’ll probably avoid Parallax in the future. With all the various device types I ended up with 8 separate media queries to serve the properly-sized background to the correct device.

Here are the ones I ended up settling with to provided the Full / Half / Quarter options as needed based on device size and orientation.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}