Search code examples
iphoneipadlayoutscaleviewport

Best method for testing viewport and scaling in iPhone and iPads


I'm looking for a way to test my web layouts for mobile devices without having to buy the actual hardware. I'm primarily interested in testing for the iPhone and the iPad. I own an iPhone and so can do a proper test there. But I'm unable to know for sure what it looks like on the iPad. Either way: it would be nice to check the visual output on my Mac as I'm building it for productivity sake.

testiphone.com is supposed to simulate the appearance of a website, but there is a difference in rendering the layout scale: On my iPhone hardware, the content's width is scaled to fit the left and right margins of the screen. In the testiphone.com simulator, the content is not scaled at all.

So does there exist a method that can test visual layouts consistently?

(I'm not opposed to subscribing to the Developer SDK, but if there's a faster and easier way to get the viewport and scaling to behave consistently, I would prefer it!)


Solution

  • You can download an SDK with a free developer account. You will not have access to beta versions, but you won't need them for testing web layouts. Go to http://developer.apple.com/ios and click the link for "XCode and iOS SDK". It will ask you to log in with your apple id, and set up a free developer account if it isn't registered with one. Then, use the iPhone Simulator application to test your website.