Thursday, January 19, 2012

iOS Meta Tags

Over the last few months, there have been several requests for the ability to override the tags that are used for determining how a website scales on iOS devices. Before Real Studio 2011r4, you were locked into using our defaults.

Viewport

The default tag looks like this:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

This says:
1. The page width should be the same as the device width
2. Users are NOT allowed to pinch or zoom the page to change the scale
3. The initial scale is 100%
4. The minimum scale is 100%
5. The maximum scale is 100%

While this works out great for web applications (most of the time anyway), it's not so hot for other uses.

Take our Orders example – the minimum width of the main screen is 1012. Not so much a constraint of the browser, but of the content on the page. When viewed on an iPad in portrait mode, you have to slide the page left and right to access all of the elements. To accommodate this, you can now override this tag with your own by simply adding a replacement in App.HTMLHeader. For the Orders example, the code looks like this:

<meta name="viewport" content="width=1012">

This tag tells the browser that the width of the content is 1012 and not to restrict page scale. In doing so, the page will scale to fit the device. Note: Using this dimension does not work for smaller devices like the iPhone. With a smaller screen, it tries to fit the content into 320px (portrait mode) or 480px (landscape mode), which means the content will be drawn at ¼ or ⅓ of the original size, respectively.

Web App Capable

On iOS devices, when looking at a web page in Safari, you can add the current page to your Home screen where it will get an icon and be available directly with a single touch. Our defaults make it so Safari does not display the URL and Search fields, nor the Safari toolbar across the bottom of the page. The result is that there is a greater amount of vertical space for your application to run.

If you want to turn off this capability, thereby making your application always work more like a website, you can add a line to App.HTMLHeader:

<meta name="apple-mobile-web-app-capable" content="no">

Web App Icons

By default, we compose your application icon for you so that it fits nicely within a white rounded rectangle background. While this is the style that Apple recommends for icons, you have very little control of how big your icon will be. Moreover, as Apple has started offering devices with higher resolution screens, they've suggested different resolutions for different devices.

You can override the default icon by adding a line like this:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png">

if you want iOS to add the nice "shine" effect to your icon, leave out "precomposed" like this:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

For more information on the options for configuring Web Applications for iOS, see Apple's Safari Web Content PDF.

Remember: setting these values affects every page that is loaded. If you set the width to 1024, every page will render as if it needs 1024 pixels to appear properly. If your page is only 320 pixels wide it will only take up ⅓ of the device width, regardless of the resolution.

No comments: