My question is pretty much about page reload rather than retina detection. I'm using the code below in head tag for retina display :
It's detecting the visitor's screen type, then storing the cookie and reload if it's a retina display. It's working without an issue except one.
Reload function doesn't stop page rendering. Because of this, you see unstyled page on the first visit (half loaded) then refresh comes. Afterwards, everything is fine for the rest of the site since cookie is stored.
So obviously, PHP doesn't provide a function to detect screen type. It must be done through JS. But JS doesn't have the proper tool for reloading / redirecting without loading the page, even code is being used in head.
In short, I'm stuck in between. I hope someone may have a suggestion for reloading without showing any content on first load (it's even displaying inline styling that I put in head). Or displaying standard images on the first load and allowing retina for the rest of browsing experience is the best option?
By the way I tried both reload(true) and reload(false). It didn't help.
UPDATE : Please see Marat Tanalin's answer below for possible workarounds and better solutions on retina / HD display image use rather than storing cookie + reloading.
After I went deeper on this, I realized that generating both retina and standard images may not be the answer all time due to *caching methods. In other words, displaying low quality images to visitor on first visit and displaying high quality images after refresh may not work since low quality images (and scripts) already cached.
I decided to go with 1.5x single image size with SVG upload support. Although it's not 100% best answer on every aspect, much better option then losing reliability.
*I'm a Wordpress developer and I refer WP Super Cache and similar cache methods but be aware of it may be an issue on other cache methods as well.