Skip to main content

You should know about H5 development knowledge - HTML

ยท 3 min read

HTML5 is different from PC Web development. It has its own unique attributes and functions, such as special meta tags only valid in mobile browsers, and special events, such as touchStart, touchMove and so on. Here's what you need to know to develop H5 about HTML.

Browser featuresโ€‹

<!-- auto call telephone -->
<a href="tel:123456789">Call me</a>

<!-- auto send sms -->
<a href="sms:123456789">Send me a message</a>

<!-- auto send email -->
<a href="mailto:[email protected]">Send me an email</a>

<!-- select image only -->
<input type="file" accept="images/*" />

<!-- select video only -->
<input type="file" accept="video/*" />

disabled automatic identificationโ€‹

Sometimes we may not need automatic identification, such as mobile phone, email, etc., we can also manually disable it.

<!-- disable telephone identification -->
<meta name="format-detection" content="telephone=no" />
<!-- disable email identification -->
<meta name="format-detection" content="email=no" />
<!-- disable multiple auto indentification -->
<meta name="format-detection" content="telephone=no, email=no" />

Pop up numeric keypadโ€‹

Mobile phone keyboard pop-up can also limit the input of only numbers, we can set the input type to number

<!-- pure number with * and # -->
<input type="tel">

<!-- pure number only -->
<input type="number" pattern="\d*">

This works only on native keyboards, not third-party apps like Google Chrome.

Set the preferred browser kernel, such as Internet Explorer, Chromeโ€‹

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

disable Cacheโ€‹

<meta http-equiv="Cache-Control" content="no-cache" />

Turn off uppercaseโ€‹

When we use the keyboard to enter English characters in the input box, the general first letter will be automatically capitalized, if not necessary can be turned off.

<input type="text" autocapitalize="off" />

Turn off automatic input correctionโ€‹

As well as automatically capitalizing English input, IOS also has a feature that automatically corrects input by default, so users often have to do it twice. If you don't want to turn this feature on, you can turn it off using the input attribute.

<input type="text" autocorrect="off" /> 

Disable page zoomingโ€‹

If we don't want the page to scale, we can set the user-scalable value of viewport to no.

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

Identify qr codeโ€‹

If you want to achieve long press two-dimensional code to automatically recognize the two-dimensional code. Display images using the img tag, not css background.

<img src="" />

That's all. Thanks for reading.

Further readingโ€‹

You should know about H5 development knowledge - CSS

You should know about H5 development knowledge - JavaScript