H5頁面開發適配方案，平時的一些小總結，希望能幫助到大家。
部落格維護在git上，歡迎給一個star!!! https://github.com/mtonhuang/blog
樣式重置
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{-webkit-tap-highlight-color:rgba(0,0,0,0);}
html,body{height:100%;}
a{text-decoration:none;}
複製程式碼viewport模板
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,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>
<link rel="stylesheet" href="index.css">
</head>
<body>
內容
</body>
</html>
複製程式碼特殊機型適配
iPhoneX，作為唯一有劉海手機，對頁面適配帶來了問題，可以用如下程式碼適配iPhoneX。
/* iPhoneX適配 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.class{}
}
複製程式碼iPhone4，作為窄屏手機，解析度為960x640，web視窗的高度僅有832px，容易引起適配的問題，如頁面的主體按鈕被隱藏在螢幕外，通常需要對它做特殊適配
/* 適配iPhone4 */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
.class{}
}
複製程式碼