网站h5页面在苹果手机ios端访问 字体异常放大



h5页面再安卓端显示正常,字体,图片均正常,再苹果手机ios中用safari浏览器方位,字体特别大,非常影响用户体验
经过笔者研究找到问题关键,解决方法如下
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 /*实际相当于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;}}
问题即可解决