Various HTML,HTML5 Tips & Tricks To Develop Mobile Web Applications

5 min readJan 14, 2016

TRICKS

Coming in touch with the mobile world is highly competitive. You will come across dozens of browsers, versions, screen sizes, undocumented features, bugs and numerous of new problems with solutions to work with this highly competitive mobile world. So, this is the reason where we have to deal with certain situations, to go beyond our developing limits to accomplish our ultimate objectives. I introduce you guys with those professionally advance HTML5 tricks to develop and convert PSD to HTML5 & design mobile applications here. Come and let’s have look on those HTML tricks:

Developing a full screen HTML5 based mobile apps

It can be adjusted on various mobile versions by documenting them with a height that is at least equal to your device’s height by using the following snippet below to hide the URL bar.

1. window.addEventListener(“load”, function() { window. scrollTo(0, 0); });

Follow a fullscreen experience on your particular browser. Offers full possibility of reducing the URL bar reappearance process by restricting your browser from working with the touch scroll mode:

1. document.addEventListener(“touchmove”, function(e) { e.preventDefault() });

In Google Chrome, Firefox OS, Firefox for Android, BlackBerry OS 10 and Amazon Silk uses the standard Fullscreen APIs from the W3C.

There are still few browsers that prefer to work with prefixes. This can further be achieved by working as 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. }

keep in mind when you request fullscreen browser mode is that you should do it only after a user’s interaction — for example, when it is activated by a touch operation.

o enable the minimal UI mode, just use:

At the time of enabling your browser browsing mode, you need to consider few special cases in the 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) {S

3. /* minimal-ui is active */

4. }

02. Creating a web app on the home screen

To enable this we need to add some meta tags:

1. <! — for ios 7 style, multi-resolution icon of 152x152 →

2. <meta name=”apple-mobile-web-app-capable” content=”yes”>

3. <meta name=”apple-mobile-web-app-status-barstyle” content=”black-translucent”>

4. <link rel=”apple-touch-icon” href=”icon-152.png”>

5. <! — for Chrome on Android, multi-resolution icon of 196x196 →

6. <meta name=”mobile-web-app-capable” content=”yes”>

7. <link rel=”shortcut icon” sizes=”196x196" href=”icon-196.png”>

03. High resolution Canvas

If your are working with Canvas feature of HTML, then you must be aware that Canvas API is a bitmap-based drawing interface that efficiently works as an image loaded from a file. So, if you have created a canvas with width=200, then it will create a 200 real pixel image.

If you want to develop a highresolution image, that is double than its original one, then you should prefer the below coding system:

1. <canvas width=”400" height=”400" style=”width: 200px; height: 200px”></canvas>

2. <script>

3. document.queryselector(“canvas”).getContext(“2d”).scale(2, 2);

4. </script>

04. Truly numeric text field

Working with numeric text field needs a below mentioned code system:

If you are adding a pattern=”[0–9]*” attribute then you should definitely use numeric keypad in iOS as in other operating systems:

1. <input type=”number” pattern=”[0–9]*”>

You can also use this trick with type=”password” to get a numeric keypad for a PIN text field.

1. <input type=”password” pattern=”[0–9]*”>

05. Responsive web design and Windows 8

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. }

07. Rich editor

While working with HTML5, you have definitely noticed that there is a new Boolean attribute for HTML elements known as ContentEditable. This attribute on any HTML element, including a <div>, a <table> or a <ul> will work well without any error.

When you tap on those HTML5 elements, then the virtual keyboard appears and then a user is asked to edit them, even if it includes rich HTML — such as one of those that deals with adding new list’s items using the Enter Virtual key. To save updates, you should check on the innerHTML attribute of the element.

On iOS the user will 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>

08. Safari’s tint

Safari for iPhone and iPod touch comes with a tint color appearance that goes behind a semi-transparent Safari UI. So, at this point of time when your page loads, Safari searches for background color that is suitable for your website to define that tint feature. There is another trick to define it:

1. body {

2. /* for safari’s tint */

3. background-color: blue;

4. /* for the document’s body background color */

5. background-image: linear-gradient(to bottom, red 0%, red 100%);

Well , next section teaches you various HTML5 tips to develop any website

Industries are moving extremely faster in a manner that if we are not careful about our working styles, then there is every possibility of leaving us behind from this highly competitive era. Here is few web developing tricks that should be referred by every web developers or you can say they are purely needed by web designers to design outstanding websites. Let’s have a thorough look on them:

1. New Doctype

Are you still working with that impossible-to-memorize XHTML doctype? Lets work with more advance designing steps:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

1<!DOCTYPE html>

2. The Figure Element

Consider the following mark-up for an image uploading process:

<p>content here </p>

An acceptable way to associate your captions wrapped in a paragraph tag with the image element itself. HTML5 purely solves this problems, with a proper introduction of the <figure> element. At the time of combining them with the <figcaption> element, you can now semantically associate captions with their image counterparts.

<p>Write content for image</p>

</figcaption>

</figure>

3. <small> Redefined

The small element has been redefined efficiently, to refer to small amount of coding styles.

The small element now refers to “small print.”

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

This is no longer necessary. It’s implied that both of these tags refer to style-sheets and scripts, respectively. As such, we can remove the type attribute all together.

Make content editable

<!DOCTYPE html>

<head>

<title>Site Title</title>

</head>

<body>

<li> It has survived not only five centuries </li>

<li> Letraset sheets containing Lorem </li>

<li> Contrary to popular belief </li>

</ul>

</body>

</html>

Or, as we learned in the previous tip, we could write it as:

Various HTML,HTML5 Tips & Tricks To Develop Mobile Web Applications

Written by Samuel Dawson