H5 page development adaptation scheme, usually some small summary, I hope to help you.

Blog maintenance on Git, welcome to a star!! https://github.com/mtonhuang/blog

Style reset

body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td{margin:0; padding:0; } h1,h2,h3,h4,h5,h6{font-size:100%; } ul,dl,ol{list-style:none; } img,fieldset,input[type="submit"]{border:0 none; } img{display:inline-block; overflow:hidden; vertical-align:top; } em{font-style:normal; } strong{font-weight:normal; } table{border-collapse:collapse; border-spacing:0; } button,input[type="button"]{cursor:pointer; border:0 none; } textarea{word-wrap:break-word; resize:none; } menu{margin:0; padding:0; } body{-webkit-user-select:none; -webkit-text-size-adjust:100%! important; font-family:Helvetica; } input[type="number"]{-webkit-user-select:text; } a,button,input,img{-webkit-touch-callout:none; } input,select,textarea{outline:none; } a, button, input {- its - tap - highlight - color: rgba (0,0,0,0); } html,body{height:100%; } a{text-decoration:none; }Copy the code

Viewport template

<! DOCTYPE html> <head> <meta charset="utf-8"> 
<meta content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" name="viewport"> 
<meta content="yes" name="apple-mobile-web-app-capable"> 
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 
<meta content="telephone=no" name="format-detection"> 
<meta content="email=no" name="format-detection"> <title> title </title> <link rel="stylesheet" href="index.css"> </head> <body> Content </body> </ HTML >Copy the code

Special type adaptation

IPhoneX, as the only phone with bangs, brought problems to the page adaptation, you can use the following code adaptation iPhoneX.

/* iPhoneX adapter */ @media only screen and (device-width: 375px) and (device-height: 0) 812px) and (-webkit-device-pixel-ratio: 3) { .class{} }Copy the code

IPhone4, as a narrow-screen mobile phone, has a resolution of 960×640 and the height of the Web window is only 832px, which is easy to cause problems of adaptation. For example, the main button of the page is hidden outside the screen, and special adaptation is usually required

/* iPhone4 */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){. Class {}}Copy the code