H5移動端開發meta設定
阿新 • • 發佈：2022-05-16
標準化H5開發的meta設定：
<head> <meta charset="utf-8"> <!-- 相容ie8瀏覽器 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--文件的寬度等於裝置寬度；初始縮放比例1:1；最多縮放比例1；不允許縮放；--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <!--這個也是iphone私有標籤，允許全屏瀏覽。--> <meta content="yes" name="apple-mobile-web-app-capable"> <!--iphone的私有標籤，iphone頂端狀態條的樣式。--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <!--禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。--> <meta content="telephone=no" name="format-detection"> <!--禁止email識別--> <meta content="email=no" name="format-detection"> <!-- 圖示 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 標題 --> <title><%= htmlWebpackPlugin.options.title %></title> </head>
其他meta設定：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- ios-safari瀏覽器頂部的狀態列；預設值default（白色），可選值black（黑色）、black-translucent（灰色半透明）-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios-safari：允許全屏模式瀏覽，隱藏瀏覽器導航欄 -->