Hi i have the same problem here the background are exremly low res on mobile.
https://www.dropbox.com/s/htveytmuj852fap/IMG_0100.PNG
This is the webpage – http://www.gregor-maass.de/
Plugin Author
brx8r
(@brx8r)
I’m a bit stumped as to how to even debug this problem on mobile. In chrome’s device simulator they load at a nice res :/
Plugin Author
brx8r
(@brx8r)
I just did some testing, by getting the JavaScript to alert it’s vars on a public site, and the URL and resolution look correct on my Android phone in chrome (3x device pixel ratio).
The screen on my laptop has a 2.25 device pixel ratio and the URL and resolution get worked out correctly there too.
I am unable to test with any apple products so unless someone can tell me what’s going wrong, I can’t do much about it.
I’ve set up this site which should generate some info about your retina screen:
http://www.braksator.com/retina.html
For example on my android it says:
w:360 h:640 r:3
rw:1080 rh:1920
so the screen is 360×640 but the picture selected should be suitable for a 1080×1920 screen because the devicePixelRatio is 3x.
(What exactly happens with that info will depend on your settings in the plugin though, though I suppose it’s unlikely something would be happening that you didn’t intend in that regard)
Thanks for responding,
That’s exactly what’s so head scratching about it… Everything looks great on all the test utilities and on android phones and an old iPad2. As far as I can tell, the issue is with iPhone 6 and 7. I don’t own one of those devices either, so I am in the “client has a problem that I can’t see” situation..
I have tried adding the meta tag “”viewport” content=”width=device-width, initial-scale=1.0″ as recommended by several online sources, with no luck. I have a screenshot of what the problem looks like here:
http://www.rooftopmedia.org/iphone6.png
