網(wǎng)站h5頁(yè)面在蘋(píng)果手機(jī)ios端訪問(wèn) 字體異常放大
發(fā)布時(shí)間：2024-07-27 23:50:50
發(fā)布者：admin
Tags：h5頁(yè)面再安卓端顯示正常，字體，圖片均正常，再蘋(píng)果手機(jī)ios中用safari瀏覽器方位，字體特別大，非常影響用戶體驗(yàn)
經(jīng)過(guò)筆者研究找到問(wèn)題關(guān)鍵，解決方法如下
1，html文件中加入如下代碼：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name='viewport' content="width=device-width, viewport-fit=cover" />
2，css文件中加入如下代碼：
/*320px布局*/html{font-size: 100px;}body{font-size: 0.14rem /*實(shí)際相當(dāng)于14px*/}
/* iphone 6 */@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 117.1875px;}}
/* iphone6 plus */@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ html{font-size: 129.375px;}}
問(wèn)題即可解決
