Summary of some common information about tags in HTML5 header

Time：2021-3-4

preface

As we all know, in the development of mobile front-end, add some WebKit specific HTML5 header tags to help browsers better parse HTML code and better display mobile web front-end pages. This paper sorts out some common information of < meta > tags in HTML5 header. Error, please leave a message to correct, or can leave a message to add, welcome to exchange messages!

XML/HTML CodeCopy content to clipboard
  1. <! — Font encoding — >  
  2. <meta charset=“utf-8” />  
  3.   
  4. <! — Keyword — >  
  5. <meta name=“keywords” content=“” />  
  6.   
  7. <! — description — >  
  8. <meta name=“description” content=“” />  
  9.   
  10. <! — author — >  
  11. <meta name=“author” content=“” />  
  12.   
  13. <! — set document width, zoom or not — >  
  14. <meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=no” />  
  15.   
  16. <! — the latest version of IE or chrome is preferred — >  
  17. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1” />  
  18.   
  19. <! — when 360 reads this tag, it immediately switches to speed mode — >  
  20. <meta name=“renderer” content=“webkit” />  
  21.   
  22. <! — prohibit Baidu transcoding — >  
  23. <meta http-equiv=“Cache-Control” content=“no-siteapp” />  
  24.   
  25. <! — UC forced vertical screen — >  
  26. <meta name=“screen-orientation” content=“portrait” />  
  27.   
  28. <! — QQ forced vertical screen — >  
  29. <meta name=“x5-orientation” content=“portrait” />  
  30.   
  31. <! — UC force full screen — >  
  32. <meta name=“full-scerrn” content=“yes” />  
  33.   
  34. <! — QQ forces full screen — >  
  35. <meta name=“x5-fullscreen” content=“ture” />  
  36.   
  37. <! — QQ application mode — >  
  38. <meta name=“x5-page-mode” content=“app” />  
  39.   
  40. <! — UC application mode — >  
  41. <meta name=“browsermode” content=“application”>  
  42.   
  43. <! — window phone lights up without highlight — >  
  44. <meta name=“msapplication-tap-highlight” content=“no” />  
  45.   
  46. <! — Android devices do not automatically recognize email addresses — >  
  47. <meta name=“format-detection” name=“email=no” />  
  48.   
  49. <! — IOS device — >  
  50.   
  51. <! — Title added to home screen — >  
  52. <meta name=“apple-mobile-web-app-title” content=“Title” />  
  53.   
  54. <! — enable webapp full screen — >  
  55. <meta name=“apple-mobile-web-app-capable” content=“yes” />  
  56.   
  57. <! — set the background color of the status bar to take effect when webapp mode is enabled — >  
  58. <meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent/black/default” />  
  59. <! — translucent / Black / default white — >  
  60.   
  61. <! — do not recognize numbers as phone numbers — >  
  62. <meta name=“format-detection” content=“telephone=no” />  
  63.   
  64. <! — add ad bar intelligently — >  
  65. <meta name=“apple-itunes-app” content=“app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl” />  

summary

This article is just a summary of some common information of < meta > tags in HTML5 header. I hope it can be helpful for you to learn or use HTML5. If you have any questions, you can leave a message. Thank you for your support for developer.

Tags: , ,

Recommended Today

Use of Android WebView (super detailed usage)

1.1 overview of WebView Android WebView is a special view on the Android platform. It can be used to display web pages. This WebView class can be used to display only one online web page in the app. Of course, it can also be used to develop browsers. The internal implementation of WebView uses WebKit […]