前端页面嵌入到带刘海机型的 iPhone 内后尽管宽高配置了100%后依然会出现上下部分均留黑和上下可滑动的情况出现，通过如下方式可以将其避免，具体操作如下：
首先，找到项目中的根目录文件 index.html
其次，在 viewport 的 meta 中配置如下属性即可：
viewport-fit=cover
最后，在正常尺寸的屏幕内是完全 ok 不会受到该影响，若有刘海屏的情况配置后即可，完整 code 如下：
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <script src="path/to/vconsole.min.js"></script>-->
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
拓展
一、user-scalable=no
与 viewport-fit=cover 同理，也是在 viewport 的 meta 中配置，该属性可以屏蔽掉输入框缩放的特效，很实用的一个属性
二、vConsole
vConsole 一款在移动端调试很方便的辅助工具，可以直接在手机端查看一些浏览器开发者模式下的信息
以上便是此次分享的全部内容，希望能对大家有所帮助！
网友评论