HTML5 Tricks for Mobile

IOS 7.1 Safari Adds the Minimal-ui property to the META tag to hide the address bar and navigation bar when the page loads

Creating a fullscreen experience

On Android browser–the default Browser on Android up to 4.3, and different to chrome–the only solution are to has a do Cument with a height at least equal to the device's height, and to use the following snippet to hide the URL bar.

1. Window.addeventlistener ("Load", function () {window. ScrollTo (0, 0);});

Google Maps uses this trick to emulate a fullscreen experience on this browser. When used carefully, you can also reduce the possibility of a URLs bar reappearance by preventing the browser from managing The Touch Scroll:

1. Document.addeventlistener ("Touchmove", function (e) {E.preventdefault ()});

In Google Chrome, Firefox OS, Firefox for Android, BlackBerry os Ten and Amazon Silk (the browser developed for Kindle fire We can use the fullscreen API from the website.

IPhone on iOS, Android Browser and Chrome on Android using a fullscreen mode with different implementations. On IE11 for Windows phones, the user needs to approve fullscreen view

As you should already know, some browsers still work with prefixes, so for this we need a multivendor code:

1. var body = document.documentelement;
2. if (Body.requestfullscreen) {
3. Body.requestfullscreen ();
4. } else if (Body.webkitrequestfullscreen) {
5. Body.webkitrequestfullscreen ();
6. } else if (Body.mozrequestfullscreen) {
7. Body.mozrequestfullscreen ();
8. } else if (Body.msrequestfullscreen) {
9. Body.msrequestfullscreen ();
10. }

The only important restriction to remember when requesting fullscreen mode are that we should does it only after a user ' s int eraction–for example, activated by a touch operation.

Apple offers a solution for IPhone since IOS 7.1, using a special attribute of the viewport meta tag requesting a minimal UI from Safari to portrait and no UI at all on landscape. This mode isn't available on IPad.

To enable the minimal UI mode, just use:

1. <Meta name="viewport" content="width=devicewidth, Minimal-ui" >

When this mode was enabled, you need to take some special carearound touchable areas near the edges.

To detect if the minimal UI mode is enabled:

1. @media (device-height:568px) and (HEIGHT:529PX),
2. (device-height:480px) and (height:441px) {
3. /* Minimal-ui is active */
4. }

Creating a web App on the home screen

On ios–for both IPhones and Ipads–and Chrome on Android we can having a fullscreen experience after the user has install Ed an icon on the home screen. The web app would run outside of the browser, even from a multitasking point of view. To enable this we need to add some meta tags:

2. <!--for iOS 7 style, multi-resolution icon of 152x152--
4. <Meta name="apple-mobile-web-app-capable" content="yes" >
6. <Meta name="Apple-mobile-web-app-status-barstyle"content=" Black-translucent ">
8. <link rel="Apple-touch-icon" href="Icon-152.png" >
10. <!--for Chrome on Android, multi-resolution icon of 196x196--
12. <Meta name="mobile-web-app-capable" content="yes" >
14. <link rel="shortcut Icon" Sizes="196x196" href="Icon-196.png ">

On Firefox OS and Firefox for Android we can also create home screens web apps by creating a JSON manifest and using a Java Script API. See the official documentation for examples.

When you define a home screen web app beside a chrome-less app, your app would have a entry in the task bar of the OS, APA RT from the browser

. High resolution Canvas

The Canvas API is a bitmap-based drawing interface This works as an image loaded from a file. Therefore, if you create a canvas with width=200 It'll create a $ real pixel image. On the document it'll be is drawn at a css-pixel width, independent of the resolution.

That means this on an iPhone 5S, the pixel image would be resized to the device pixels, and the a Nexus 5 device it would Be resized to device pixels–in both cases losing some of the resolution of your image. If you want to create a highresolution image, let's say double of the original, medium-resolution device, it ' s possible to Use the following trick:

1. <canvas Width="height" = "the" style ="width:200px; height:200px "></canvas>
2. <script>
3. Document.queryselector ("Canvas"). GetContext ("2d"). Scale (2, 2);
4. </script>

Be aware that increasing the size of your canvas would also increase the memory used and the CPU required to create the DRA Wings, so we should does it only if we are sure and we are dealing with a high-resolution device.

Truly numeric text field

I ' m pretty sure already know all the new HTML5 types for the input element, such as Type=email , that trigger Different virtual keyboards on touch devices. While in Android and Windows Phone you'll get a fully numeric keypad when usingtype=number, you might not Reali SE, on IOS, you don ' t get exactly.

If you want to get a fully numeric keypad on iOS, you have to add a pattern value on the INPUT element. By default, the number type would allow the user to type letters

If you add a pattern= "[0-9]*] attribute then you'll get a truly numeric keypad in IOS as with other operating sys TEMs

1. <input type="number" pattern="[0-9]*" >

You can also the trick with type= "password" to get a numeric keypad for a PIN text field.

1. <input type="password" pattern="[0-9]*" >

Responsive web design and Windows 8

If you is working with responsive websites, you might think that defining a mobile viewport meta tag and different BREAKP Oints with CSS media queries is enough. However, there is one particular situation that needs a little more work:windows 8.x with Internet Explorer this works in Fullscreen mode (previously known as Metro mode).

On IE for Windows 8.x mode can share the screens with other apps–in which case by default your website would be zoomed Out, even if you have responsive breakpoints on CSS

In Windows 8 and 8.1 a website opened in this browser can share the screens with other fullscreen mode apps, including the Classic Desktop. In this case, and when the available width was less than 1024x768 pixels, IE would apply a mobile behaviour that zooms out the W Ebsite and does not apply your responsive code.

To solve this issue, we can use the CSS Viewport declaration on a media query, such as:

1. @media only screen and (max-width:400px) {
2. @-ms-viewport {width:320px;}
3. }

. Where is my date and time picker?

You were told this by using the <input type=datetime> you get a date and time picker on the most browsers. And it is true on mobile devices until IOS 7 and Chrome + for Android. Since those versions, that kind of form control renders as just the default text fields.

However, aware that the date and time Picker was still available on those browsers using type=datetime-l Ocal, as this is not a properly announced or documented by the browser ' s vendors.

1. <input type="datetime-local" >

. Rich Editor

On HTML5 There are a new Boolean attribute for HTML elements:contenteditable. We can use the attribute on any HTML element, including a <div>, a <table> or a <ul& gt;.

When the user taps on those elements, the virtual keyboard would appear and the user would be able to edit it, even if it in Cludes Rich Html–such as adding new list ' s items using the Enter Virtual key. To save updates, you should check the InnerHTMLattribute of the element.

With contenteditable we can create a rich editor for IOs, Android, Windows Phone and other devices using the virtual Keybo ARD on any HTML element

On IOS the user would be able to apply bold, italics and underline on a selection ' s contextual menu.

1. <ul contenteditable>
2. <li>static item in the HTML
3. </ul>

Tint Safari ' s

Since IOS 7, Safari for IPhone and IPod touch includes a tint colour that goes behind a semi-transparent Safari UI. When your page loads, Safari looks at the background colour of your website to define that tint. There is no-define that tint programmatically or through a meta-tag, but I had a trick to enable you to chose a di Fferent colour for the tint and your background.

1. Body {
2. /* For Safari ' s tint */
4. /* For the document ' s body background color */
5. Background-image:linear-gradient (to bottom, red 0, Red 100%);
6. }

If your body ' s background is red, the safari UI on IPhone would tint the toolbars with the same colour. Tip outlines a trick to change the colour (right)

Home screen icon Name

When you add a website to the home screens on IOS, Chrome on Android or pin a website to a tiles on Windows Phone, your HTML ' s <title> content would be is used for the icon ' s name. Because of SEO techniques, we know that we are title is not exactly friendly for the home screens on our mobiles.

An undocumented meta tag in Safari on IOS exists this helps us a lot with defining the name of an icon:

1. <Meta name="Apple-mobile-web-app-title"content="Myname" >

On Windows Phone and Windows 8.x Tablets we can define the tile ' s title using:

1. <Meta name="Application-name" content="Myname" >

Unfortunately, there is no-to-Define the icon ' s name on Chrome on Android programmatically.

On Windows 8+ and Windows Phone 8.1+ the user can pin a website to the start screen. We can customise how it looks and update its contents through META tags

Live Tiles for Windows Phone

The user can pin websites from IE to the Windows 8.x start screens, and this feature have been added to the lastest windows Phones. You can convert this tile on the home screens to a Live tile, updating info and keeping the icon alive even when your WEBSI Te is not open anymore.

To does this we need to define some meta tags. Let's see first and all else we need to define the tile icon:

<meta name= "Msapplication-tileimage" content= "tile-background.png" ><meta name= "Msapplication-TileColor" Content= "#FF0000" >

You can build the meta tags for your Live Tile using build My Pinned site online tool. If you had an RSS feed it would import it and give you the code to copy and paste

For the liveness of the tile, we can define a Badge Polling URI (compatible since IE10) and/or a Notification Polling URI (compatible since IE11). The first one can update the icon and unread elements on the tile and the latter can bring news and information that'll Be rendered on the Live Tile ' s animation. In both cases, we can also define the frequency of the polling operation.

1. <meta  name = "Msapplication-badge"
2.  content= " Frequency=60;polling-uri=http://host/badge.xml ";
3. <meta   Name= "msapplication-notification"
4.  content= " Frequency=30;polling-uri=http://host/live.xml ";

There are a nice Live tiles creator available on the Windows site, and a WordPress plugin available that'll do the work fo R you.

Zombie tab for IOS

Browsers on mobile devices could look like their cousins on desktop but their behaviour are far from the same. Consider Safari for ipad:it have tabs. However, if you open three tabs with Facebook, Twitter and Gmail, you'll only receive updates from the active tab. Every Inactive tab is frozen. That means no JavaScript execution, and no-to-receive updates as we are used-to-on desktop.

With this trick, we can take a inactive tab or window and make it come to life. Why? Well, we can receive updates from the server, and if there are something really important we can change the TAB's title to Alert the user (only for iPad), or we can just use a alert dialog to interrupt the user while they is on a different tab or window.

Some mobile browsers such as Safari on the IPad look like desktop browsers, and only if the active tab is alive. The Zombie Tab hack tackles this issue

The hack requires the usage of the classic refresh meta tag that triggers a page ' s reload operation. When the page is frozen, Safari would still honour that meta tag and would revive that window. But we also need to pause the reload operation while we were in the active window. To does this we shift the refreshmeta tag every x seconds (a code that won ' t fire when frozen).

1. <Meta http-equiv="Refresh" content="2" >
2. <script>
3. var Mr = Document.queryselector ("meta"); SetInterval (function () {mr.content=mr.content;}, 1000);
4. </script>

Be careful-only-use the when really need it. I won ' is held responsible for websites in the background annoying and you is peacefully reading an article.

Handle with Care

In this article, I gave you examples, hacks and undocumented features so we can use the Today on mobile devices. You should is aware that is working on the edge of the the known world, and the hacks that work for you now might not wor K properly on the future browsers.

You should all remember that performance and multi-platform is key features of the your Web app or Web content. Even when hacks was a necessary evil today, you need to ensure that your content is still compatible if the trick doesn ' t Work.

http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803

HTML5 Tricks for Mobile