How to preview the Retina display enhanced Apple.com in Safari on Mac or PC

Posted:
in iPad edited January 2014


Apple's official website has been quietly updated to take advantage of the Retina display on the new iPad. Users can preview the higher-resolution site now with a simple tweak in Apple's Safari desktop Web browser.



As AppleInsider first reported earlier Tuesday, Apple has begun upgrading portions of its website with high-resolution images that are large enough to fit on the third-generation iPad's Retina display. These images can currently be found on the Apple.com homepage, as well as the iPad portion of the site.



Though it was previously believed that users needed to enable HiDPI resolutions with developer tools on their Mac to view these images, there is a workaround that will allow any desktop Safari user to view the Retina display enhanced images on Apple.com. The method was first discovered by Macotakara.



To do this, in Safari choose Preferences, then Advanced and check the option "Show Develop menu in menu bar." Users can then right-click on the Apple.com homepage and choose "Inspect Element."



From there, choose the "Console" option to the far right, paste the following, and press return:

Quote:

AC.ImageReplacer._devicePixelRatio = 2

new AC.ImageReplacer()



The Safari developer console should then respond with "klass." the "Inspect Element" menu can now be closed. Then, under View, choose Zoom In.





Above: Regular Apple.com. Below: Enhanced for the new iPad's Retina display.







With this method, users of both Mac and Windows can get a close-up look at the graphics that are designed to take advantage of the Retina display on Apple's new iPad, set to launch this Friday. Zooming in on the image on the main page with the Retina display enhanced images shows the text remains crisp. Users can then refresh the page and zoom in without the tweak enabled to see how the image text displays jaggy edges when it isn't enhanced for the new iPad.





Above: Apple's regular iPad features site. Below: Sharper text from the enhanced site.







The Retina display enhanced graphics are also visible with the images and text on the iPad section of Apple.com. To view them, repeat the steps above when at the URL apple.com/ipad or any of its subsections.



[ View article on AppleInsider ]

«1

Comments

  • Reply 1 of 25
    Amazing.



    Retina MBPAirs... whatever they're going to call them can't be too far down the road.



    'The new MacBook Pro?' 'The new MacBook Air?'



    Drop the 'Mac' all together... 'iBook?'



    hmm...
  • Reply 2 of 25
    nelsonxnelsonx Posts: 278member
    It says:

    Error:

    line: 2

    message: "'undefined' is not an object (evaluating 'AC.ImageReplacer._devicePixelRatio = 2')"

    sourceId: 2116261888

    __proto__: Error
  • Reply 3 of 25
    Sweet. Probably goes without saying(?) but it works on Chrome too.
  • Reply 4 of 25
    Original





    New

  • Reply 5 of 25
    asciiascii Posts: 5,941member
    The best looking site on the web at the moment.



    Viewing the Mac area of the site and the iPad area on my 27" iMac set to HiDPI, you can really tell the difference.
  • Reply 6 of 25
    andyappleandyapple Posts: 152member
    So do the first two generations of iPad employ antialiasing, is that the shadow around the text? Not necessary with the Retina Display.
  • Reply 7 of 25
    bigbblbigbbl Posts: 5member
    If you have last Xcode installed, you may run the new ipad simulator and select after launching the simulator, from the menu bar > Material > Device > iPad (Retina)



    you can find the apps at:

    Quote:

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/Simulateur iOS.app



    start Safari inside iPad (Retina) and try to visit apple.com, I don't know if it's gonna give you exactly how the new iPad will display but it's very very big
  • Reply 8 of 25
    ktappektappe Posts: 808member
    If you're getting an error, first ensure you've updated your Safari to v5.1.4.
  • Reply 9 of 25
    Man, does this mean I'm going to have to start quadrupling the resolution of the images on all the sites I design?



    The broadband companies better hurry up and start making fibre to the home standard everywhere.
  • Reply 10 of 25
    davemcm76davemcm76 Posts: 267member
    Works nicely in Chrome on Vista (bleah - but it's my work laptop!)...



    Looking at the HTML for the Resolutionary image the javascript changes it from



    <img src="http://images.apple.com/uk/home/images/ipad_title.png"; alt="Resolutionary" width="471" height="93" class="center">



    to



    <img src="http://images.apple.com/uk/home/images/ipad_title_2x.png"; alt="Resolutionary" width="471" height="93" class="center" data-hires-status="replaced">



    Can't wait to see this on my new iPad when it finally arrives... still waiting for shipping notification though so it's looking like it won't be here for Friday
  • Reply 11 of 25
    bugsnwbugsnw Posts: 717member
    The retina display was the primary reason for my upgrade. I can't wait to see all these new hi-res shots, I hope reading the WSJ is easier because the iPad 2 was actually a tad fuzzier than the 1st model, to my eyes.



    I ordered on the 10th and was surprised to see it has shipped already and is due to arrive...well...Apple estimates the 15th and their own tracking link estimates the 16th. Either way, color me excited!
  • Reply 12 of 25
    Quote:
    Originally Posted by Downpour View Post


    Man, does this mean I'm going to have to start quadrupling the resolution of the images on all the sites I design?



    Worth the fuss if you're going to have a large audience using devices such as this. It will probably become more prominent down the road. It wouldn't be worth it in many cases if there's not a large audience of that sort coming in...
  • Reply 13 of 25
    The question is how many websites are actually going to upgrade their site just for the iPad?
  • Reply 14 of 25
    tallest skiltallest skil Posts: 43,399member
    Quote:
    Originally Posted by johndoe98 View Post


    The question is how many websites are actually going to upgrade their site just for the iPad?



    How is that even a question? Sites killed off Flash because of iDevices; you can bet they'll push higher-res images for the only segment of the market that is actually growing.
  • Reply 15 of 25
    If it looks better on a regular screen why the heck wouldn't they already have upgraded the site?
  • Reply 16 of 25
    Quote:
    Originally Posted by Tallest Skil View Post


    How is that even a question? Sites killed off Flash because of iDevices; you can bet they'll push higher-res images for the only segment of the market that is actually growing.



    It will probably take a while for this to start happening in meaningful numbers. I imagine we'll see some quick upgrades on sites with a large Apple fanbase, but beyond that adoption will be slower. Web designers are also going to need to decide on some comfortable approaches to solving this problem (other than throwing high resolution images at every page view). Additionally, it doesn't combine well with some current tricks, such as using sprites.



    Quote:
    Originally Posted by David Scubadiver View Post


    If it looks better on a regular screen why the heck wouldn't they already have upgraded the site?



    The only reason why it should look much better on a regular screen is if you're zoomed in. The resolution hasn't changed. Safari does a great job of anti-aliasing resized images so that's definitely a bonus, and downscaling a large image eliminates most quality loss that might be associated with aggressive compression of the smaller image but Apple also goes out of their way to use crisp edges on their images and doesn't over compress. It *would* look much better on devices with high-dpi screens, such as the iPhone 4.



    And the main reason why they won't release this for everyone, at least while most viewers are not using devices capable of doing this justice and it is easy to track the ones they do want to target, is that these high-resolution images are much larger, and significantly increase bandwidth requirements and slow page loading significantly for people with slower connections.
  • Reply 17 of 25
    I was able to reproduce the experiment, and certainly am very pleased. I can't hardly wait to get the new iPad, I have the original one. I have VLC for iPad, I hope it works with the new model, as I find it better to handle mp4s of different characteristics than the Video app.
  • Reply 18 of 25
    jbrunijbruni Posts: 29member
    Quote:
    Originally Posted by David Scubadiver View Post


    If it looks better on a regular screen why the heck wouldn't they already have upgraded the site?



    Bandwidth. I would not want to see Apple's ISP bill.
  • Reply 19 of 25
    Quote:
    Originally Posted by ktappe View Post


    If you're getting an error, first ensure you've updated your Safari to v5.1.4.



    Works in Safari 5.0.5 Rather impressive
  • Reply 20 of 25
    jackzigjackzig Posts: 20member
    Quote:
    Originally Posted by NelsonX View Post


    It says:

    Error:

    line: 2

    message: "'undefined' is not an object (evaluating 'AC.ImageReplacer._devicePixelRatio = 2')"

    sourceId: 2116261888

    __proto__: Error



    I'm getting the same error. I have Safari 5.1.4...
Sign In or Register to comment.