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="https://www.jstyro.com/qrcode.png" />
That's all. Thanks for reading.
Further reading
You should know about H5 development knowledge - CSS
You should know about H5 development knowledge - JavaScript
This article is original, without authorization, any media or personal we media and any statement reproduced
Commercial infringement will be investigated, if you need authorization please contact[email protected]
The original link:https://www.jstyro.com/blog/you-should-know-about-h5-developement-html
Buy me a coffee