Mobile Development

i-pad development

If you have a version of your website that is optimized for mobile devices with small screens, do NOT serve that mobile version to iPad users. iPads are to look like the desktop version, just using a smaller screen. iPads users will be using the browser called Safari. NOTE: Keep in mind that plug-ins are not supported in Safari on iPads or iPhones. Use the HTML5 and tags to deliver audio and video content in Safari on iPad and iPhone. JavaScript and CSS3 transforms, transitions, and animations to create animations in Safari on iPhone OS (but NOT FLASH). Verify that your website works well without plug-ins in Safari by testing on the desktop and disable plugins – if you don’t have a iPad or iPhone Simulator to use for testing. Areas that are blank often mean you have a plug in on that section of the webpage.

Use the “device-width” constant instead of a hard-coded pixel value to have your webpage match the width of the device its being viewed on.

To test: Open Safari (on Mac OS X or Windows). Check the checkbox next to “Show Develop menu in menu bar” in Safari’s Advanced Preference pane.
On the Safari toolbar select Develop -> User Agent -> Other. You will get a dialog box. Copy/paste the code below into that box. Click the OK button.

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

The page will refresh. Inspect the request headers in the Resources pane of Safari’s Web Inspector.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s