HTML for iOS (iPod / iPad / iPhone) Web Apps

 

Wednesday, August 13, 2014

HTML-5.com is an HTML User's Guide and quick reference of HTML elements and attributes for web developers who code HTML web pages, not only for HTML 5 but for HTML coding in general, with demos and examples of HTML code plus a cheat sheet for web developers. TV Series & Actors and Actresses. Follow TV Series and HTML 5 on Google+.

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

HTML for iOS (iPod / iPad / iPhone) Web Apps

Using <meta name="viewport"/> to Control Zoom in Mobile Browsers

The <meta name="viewport"/> meta tag can be used to control how HTML content will be displayed on a mobile device. It contains a comma-separated list of properties in the form name=value as in:

name=value, name=value, ...

The "value"s are not enclosed in quotation marks.

<meta name="viewport"/> Properties
width
width=device-width or width=nnn where nnn is the number of pixels between 200 and 10000 such as in width=980 (default)
height
height=device-height or height=nnn where nnn is the number of pixels between 223 and 10000
minimum-scale
minimum-scale=f.ff where f.ff is a floating point number between 0.0 and 10.0 such as in minimum-scale=0.25 (default)
maximum-scale
maximum-scale=f.ff where f.ff is a floating point number between 0.0 and 10.0 such as in maximum-scale=1.6 (defaut)
initial-scale
initial-scale=f.ff where f.ff is a floating point number between minimum-scale and maximum-scale
user-scalable
user-scalable=yes (default) to allow the user to zoom in or zoom out on the web page or user-scalable=no to prevent the user from zooming in or zooming out

Note that when a size is specified in pixels, it is not necessarily the number of actual pixels on the device, which can vary from one device to another. It is the number reference pixels, which is defined in CSS as the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. This allows a web site to be displayed the same on devices with different screen sizes and pixel density.

See Using <meta name="viewport"/> to Control Zoom in Mobile Browsers for some examples.

<html manifest> attribute

The manifest attribute on the <html> tag specifies a URI reference that resolves to the URL of an application cache manifest, which is a list of files that can be cached for offline use.

For example:

index.html 
<html xmlns="http://www.w3.org/1999/xhtml" manifest="/cache.manifest">
cache.manifest 
# http://www.ExampleOnly.com/cache.manifest
CACHE MANIFEST
NETWORK:
*
CACHE:
/index.html
/styles/style-sheet-screen.css
/styles/style-sheet-handheld.css
FALLBACK:
/ /offline.html

The browser may prompt the user for permission to store the offline content, such as in Firefox:

<html> manifest attribute in Firefox
Apple Touch WebClip Icon

An Apple Touch WebClip Icon is a 57-pixel by 57-pixel PNG image used when bookmarking a web site or web page on an iPhone, iPad or iPod Touch device. The icon image file to be used is loaded from the web server and is specified in a <link rel="apple-touch-webclip-icon"/> tag:

<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png"/>
Other Meta Tags for Mobile Web Apps
apple-touch-startup-image
The apple-touch-startup-image meta tag specifies a startup image, which is an image that is displayed while an offline web application is being launched on the mobile device. For the iPhone and iPod Touch, the image must be in portrait orientation 320 pixels wide by 460 pixels high.
<link rel="apple-touch-startup-image" type="image/png" href="/apple-touch-startup-image.png"/>

back to top

Valid HTML 5