or Connect
AppleInsider › Forums › Mobile › iPad › How to preview the Retina display enhanced Apple.com in Safari on Mac or PC
New Posts  All Forums:Forum Nav:

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

post #1 of 26
Thread Starter 
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 ]
post #2 of 26
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...
post #3 of 26
It says:
Error:
line: 2
message: "'undefined' is not an object (evaluating 'AC.ImageReplacer._devicePixelRatio = 2')"
sourceId: 2116261888
__proto__: Error
post #4 of 26
Sweet. Probably goes without saying(?) but it works on Chrome too.
post #5 of 26
Original


New
post #6 of 26
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.
post #7 of 26
So do the first two generations of iPad employ antialiasing, is that the shadow around the text? Not necessary with the Retina Display.
Hey, this Kool-Aid is delicious, what do you put in it?!
Reply
Hey, this Kool-Aid is delicious, what do you put in it?!
Reply
post #8 of 26
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:

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
iPhone 4 16Go : iOS 5.1
New iPad 32Go Wifi: iOS 5.1 (ordered)
PC CPU Intel 2600K - GPU ATI 5870 - RAM 8GB - OS1 Mac Lion 1.7.3 - OS2 Windows 7 SP1
Reply
iPhone 4 16Go : iOS 5.1
New iPad 32Go Wifi: iOS 5.1 (ordered)
PC CPU Intel 2600K - GPU ATI 5870 - RAM 8GB - OS1 Mac Lion 1.7.3 - OS2 Windows 7 SP1
Reply
post #9 of 26
If you're getting an error, first ensure you've updated your Safari to v5.1.4.
post #10 of 26
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.
post #11 of 26
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
post #12 of 26
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!
post #13 of 26
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...
The true measure of a man is how he treats someone that can do him absolutely no good.
  Samuel Johnson
Reply
The true measure of a man is how he treats someone that can do him absolutely no good.
  Samuel Johnson
Reply
post #14 of 26
The question is how many websites are actually going to upgrade their site just for the iPad?
post #15 of 26
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.
post #16 of 26
If it looks better on a regular screen why the heck wouldn't they already have upgraded the site?
post #17 of 26
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.
The true measure of a man is how he treats someone that can do him absolutely no good.
  Samuel Johnson
Reply
The true measure of a man is how he treats someone that can do him absolutely no good.
  Samuel Johnson
Reply
post #18 of 26
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.
post #19 of 26
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.
post #20 of 26
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
post #21 of 26
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...
post #22 of 26
It works on the home page, but on other Apple.com pages it doesn't work, I get an error message, no klass.
post #23 of 26
Quote:
Originally Posted by ktappe View Post

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

I am, and it's not working.

SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

Works fine in Chrome.
post #24 of 26
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.

Except for some of the bass ackwards educational sites my daughter has to use for school that are still using Flash. One has a Flash based login and password but the rest of the site doesn't use flash. *Sigh* Because of those poorly designed sites I still have to share one of my computers with her instead of buying her her own Ipad.
Crying? No, I am not crying. I am sweating through my eyes.
Reply
Crying? No, I am not crying. I am sweating through my eyes.
Reply
post #25 of 26
Quote:
Originally Posted by bigdaddyp View Post

Except for some of the bass ackwards educational sites my daughter has to use for school that are still using Flash. One has a Flash based login and password but the rest of the site doesn't use flash.

Isn't that maddening? You would think education sites would be the first to move on to standards that are compatible with the hardware they wish to buy (iPads). Even some cooking sites (Cook's Illustrated) that feature Apps for the iPad still rely on flash for parts of their web experience.
post #26 of 26

I tried the suggested code:

 

 

Quote:
AC.ImageReplacer._devicePixelRatio = 2
new AC.ImageReplacer()

 

but it didn't work on apple.com. So I did a little digging and found that this works:

 

 

Quote:
AC.Retina._devicePixelRatio=2
new AC.Retina()
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: iPad
  • How to preview the Retina display enhanced Apple.com in Safari on Mac or PC
AppleInsider › Forums › Mobile › iPad › How to preview the Retina display enhanced Apple.com in Safari on Mac or PC