WP Retina 2x
[resolved] Nexus 7: Client Side vs. Server Side Issue (8 posts)

  1. phoenixMagoo
    Posted 4 years ago #

    First of all, thank you so much for working on this plugin. I think it's really awesome! However, I've run into an issue on the Nexus 7 (no issues on the iPad 3rd gen or Mac Book Retina).

    The Nexus 7 has a HDPI screen and these are some screen shots I took while testing on the device.

    1. WP Retina Not Activated
    2. Client side method turned on
    3. Server Side Method Turned on

    As you can see, the server side method doesn't seem to be taking on the Nexus 7, however, the client side method works great. I'm also not using any caching plugin.

    Not sure if this is something you can resolve, but I thought you might like to know.

    Once again, thanks for the plugin!


  2. Jordy Meow
    Plugin Author

    Posted 3 years ago #

    Sorry for my late reply and thanks a lot for your message and also the nice comments :)

    I don't own a Nexus 7 so it is going to be hard to try it for me directly. But let's start with the basics: using the server-method, if you turn on the DEBUG mode in the plugin settings, then load the page with your standard computer, are the images returned much bigger? (you'll have to use the Chrome Developer Tools for that for example). I just wonder if the server-method works on your website, so if you have an iPad or a Retina display available somewhere maybe you can try.

    Then if this is not working, then there is a problem with the plugin using the server-method on the Nexus 7. Something that we can try is to modify the high-res screen detection in the server side to match the one found in the client-method one. Very easy to do! Just replace the file "retina-images.js" with this:

    // Retina Images from http://retina-images.complexcompulsions.com/
    // Modified by Jordy Meow (inspired by the retina.js script).
    var root = (typeof exports == 'undefined' ? window : exports);
    document.cookie='devicePixelRatio='+((root.devicePixelRatio === undefined) ? 1 : root.devicePixelRatio)+'; path=/';

    Let's see if it works :)

  3. phoenixMagoo
    Posted 3 years ago #


    Sorry for the late reply, I've been really busy.

    I swapped out the code you requested and I'm still getting the same results.

    Works just fine and great on the iPad 3rd gen as well as the MacBook Retina!

  4. Jordy Meow
    Plugin Author

    Posted 3 years ago #

    Hello Phoenix,

    Sorry for the late reply, I was a bit busy recently, I'm willing to make a fix for this ASAP but I didn't have time to look into this issue in details as... simply put... I don't own a Nexus 7 and I don't know anyone who has one.

    Is there a website that looks nice on the Nexus 7? Maybe that would be a first place to look at solutions. The plugin handles already all the big issues and adding support for that device would be one line of code maximum I believe, but... I still need to figure out what it is ;)

    Thanks a lot for your help!

  5. phoenixMagoo
    Posted 3 years ago #

    Hey Jordy,

    I manage a couple of sites that I've used CSS media queries to swap out non-retina background-images. However, I have noticed, that the following code will not register on the Nexus 7:

    only screen and (-webkit-min-device-pixel-ratio: 2)

    However, this modification made the @2x background display:

    only screen and (-webkit-min-device-pixel-ratio: 1.3)

    I'm not sure if this sheds any light on the issue, but I hope it helps!

  6. Jordy Meow
    Plugin Author

    Posted 3 years ago #

    Hey Phoenix,

    It makes perfect sense. Based on that, I tried, and you are very right, the server-side doesn't handle this. Give me one hour or two :)

  7. Jordy Meow
    Plugin Author

    Posted 3 years ago #

    Please open the file "wr2x_image.php", and before the line with the "require..." copy-paste this:

    // Retina Images doesn't handle the float value for the cookie devicePixelRatio, so let's ceil it!
    	if ( isset( $_COOKIE['devicePixelRatio'] ) ) {
    		$_COOKIE['devicePixelRatio'] = ceil(floatval($_COOKIE['devicePixelRatio']));

    It will work :) I will update the plugin soon but I want to do another little modification before that.

  8. Jordy Meow
    Plugin Author

    Posted 3 years ago #

    Plugin updated! It should me available in your WordPress already. Tell me if it works :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Retina 2x
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic