1.2. Summary of mobile compatibility problems

1.2.1. viewport-fit=cover

The iphoneX’s “bangs” make room for the camera and other components, as well as a working area on the bottom. Then the site edge awkwardly ~ is confined to such a “safe zone”, both sides will appear a white bar. The solution is:

  1. Add a background to the body;
  2. Add the viewPort-fit = Cover meta tag so that the page takes up the entire screen.
<meta
	name="viewport"
	content="Width =device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
Copy the code

1.2.2. Format – detection

  • Disable phone numbers on the auto ID page<meta name="format-detection"content="telephone=no">

1.2.3. Html5 calls android or ios dial function

<a href="Tel: 4008106999103">400-810-6999 转 1034</a>
<a href="tel:15677776767">Click to call 15677776767</a>
Copy the code

1.2.4. Launch screen

<link rel="apple-touch-startup-image" href="start.png" />
<! --iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<! -- iPhone Retina -->
<link
	href="apple-touch-startup-image-640x920.png"
	media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
	rel="apple-touch-startup-image"
/>
Copy the code

1.2.5. Desktop ICONS

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
<! -- The above writing method may feel that there will be a default luster, the following Settings can remove the luster effect, restore the design effect! -->
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
Copy the code

1.2.6. Mobile endpoint penetration problem

<div id="haorooms">Nod event test</div>
<a href="www.jb51.net">www.jb51.net</a>
<! -- div is the absolute location of the mask layer, and z-index is higher than a: when the mask layer is clicked, the div event is found to trigger a link.
$("#haorooms").on("touchend", function (event) { event.preventDefault(); });
Copy the code