个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在开发 PWA 网站。必须通过单击主屏幕图标来启动应用程序。问题是将 iPhone 旋转到横向位置后出现 20px 间隙。这个间隙超出了 Window 对象，所以我无法用 js 或 css 处理它。看起来这是状态栏保留区域。该错误仅出现在 iOS 上(iPhone X、XR 及类似设备除外)。
是否可以控制差距？谢谢!
附上一些截图 
附上index.html
<html>
<head>
<link rel="manifest" href="manifest.webmanifest" />
</head>
<body style="background: red; min-height: 100vh;">
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/pwacompat.min.js" integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc" crossorigin="anonymous"></script> <-- manifest generator -->
</html>
还有我的 list 文件
{
"short_name": "app1",
"name": "app11",
"icons": [
{
"src": "/i/icon-128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/i/icon-256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/i/icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#3367D6",
"display": "fullscreen", // nothing changes with 'standalone' value
"orientation": "landscape",
"scope": "/",
"theme_color": "#3367D6"
}
最佳答案
元标记
在元标记中，视口(viewport)设置为:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
其中的关键部分是 viewport-fit = cover由于默认为自动，通过将其设置为覆盖，它会填充整个空间。
使用 CSS 的安全区域
您是否还使用 CSS 设置了“安全区域”:
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
安全区域定义了不被屏幕形状遮挡的空间。当您将视口(viewport)设置为覆盖时，它将填充整个屏幕，并且可能会根据设备 chop 内容。
关于javascript - PWA iOS 烦人的横向 20px 差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56724159/
28
4
0
我正在为本地一家面包店制作一个网站，我想在主页上放置一个类似 facebook 的按钮。我去了 developers.facebook 并复制并粘贴了代码。我认为过去有多种选择(iframe 等)，但
我有一个奇怪而烦人的问题。在我的 ASP.NET MVC 5 项目中，我不时看到 _ViewStart 文件和 Shared/_Layout.cshtml 文件是自动创建的，即使我不想要。因此，我删除
我是一名优秀的程序员,十分优秀！