程序员经验分享-hwhale

iPhone X 状态栏黑色网络应用程序

2024-02-18

我正在开发一个网络应用程序，并使用模拟器在 iPhone X 上进行测试，状态栏完全是黑色的。如何让我的网站覆盖整个屏幕？我没有使用任何图书馆；我看到很多问题都提到了 Cordova，但我所拥有的只是带有 CSS 的 HTML。

这是我的 HTML 代码。

<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta content="viewport-fit=cover, width=device-width, initial-scale=1.0" name="viewport">
  <title>My PWA</title>
  <link rel="stylesheet" href="/assets/styles/design.css">
</head>

这是可能的，但需要多几行。以下是具体操作方法。严格来说我认为你不需要width=device-width and initial-scale=1.0，既然你用了，我就加了。这launch.png是您的启动图像，它将显示您的页面是否需要时间加载，它应该是1125 x 2436当然，PNG 图像也可以放置在您的服务器上。这是required使其发挥作用。正如black-translucent状态栏样式和viewport-fit=cover.

另请注意，如果您已经创建了页面的快捷方式，必须将其删除并在使用此内容更新页面后再次创建它。

<html><head>
  <meta charset="utf-8">
  <link rel="apple-touch-startup-image" href="./launch.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name='viewport' content='viewport-fit=cover, width=device-width, initial-scale=1.0'>
  <title>Test</title>
</head>
<body>
    content
</body>
</html>

上面的代码会将你的视口一直拉伸到 iPhone X（和其他型号）的顶部，将顶部栏内容（时钟、电池状态、信号强度等）设置为透明白色。如果您有白色或非常浅色的背景，这可能看起来不太好。不幸的是，您无法在自己的背景上添加深色内容。然而，有几个选项可能已经足够好了。

设置apple-mobile-web-app-status-bar-style to default在纯白色背景板上为您提供黑色顶栏内容。如果您可以接受内容具有白色顶栏背景并在其下方滚动，那么这看起来会很好。

<meta name="apple-mobile-web-app-status-bar-style" content="default">

另一个选项是设置apple-mobile-web-app-status-bar-style to black。这更方便，它创建了带有白色顶部栏内容的纯黑色背景，有效地导致了使用的相反default. 

<meta name="apple-mobile-web-app-status-bar-style" content="black">

以下是不同内容参数的外观示例。不是 iPhone X，但配色方案是一样的。 https://stackoverflow.com/a/40786240/4543629

如果您需要考虑不同 iOS 设备上不同的顶栏高度，请阅读此处。 https://ayogo.com/blog/ios11-viewport/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

ios

safari

iPhone X 状态栏黑色网络应用程序 的相关文章

  • Canvas GetImageData() / PutImageData() 在移动设备上的性能很糟糕

    我正在做一个小型 HTML5 游戏 在地图开头加载精灵时 我使用 GetImageData 循环遍历所有图像 PutImageData 进行一些处理 这在我的电脑上运行得非常好 但是在我的手机上却慢得可怕 PC 5 6 ms iPhone

  • JQuery：如何仅在完成调整大小后调用 RESIZE 事件？

    浏览器窗口大小调整完毕后 如何调用函数 我正在尝试这样做 但遇到了问题 我正在使用 JQuery Resize 事件函数 window resize function how to call only once the browser ha

  • 比例背景图像

    我想放大和缩小页面中的背景图像 我尝试过多种方法 但似乎没有一种方法能按照我想要的方式工作 我的页面的网址是http quaaoutlodge com drupal 7 14 http quaaoutlodge com drupal 7 1

  • 如何在ios开发中从mp3文件中提取元数据

    我正在开发一个带有云存储的 ios 音乐播放器 我需要提取音乐信息 如标题 艺术家 艺术作品 我有一个名为 playit 的操作 可以播放和暂停 mp3 文件 它还应该使用与 mp3 文件关联的元数据来填充一些 UILables 和 UII

  • 弯曲方向等高行：列

    我有一个带有两个弹性项目的弹性布局 显示为行 flex direction column 这些物品应该有一个最小高度 但它们应该保持其中一个物品生长所需的相同高度 看这个 JSFiddle https jsfiddle net 958vxh

  • iOS8 自签名证书已安装但仍不受信任

    由于我无法控制的原因 我需要使用自签名证书针对平台进行 iOS 开发 它是一个在 SAN 中具有特定 IP 地址的根证书 当证书安装在 OSX 系统帐户下时 所有浏览器现在将正常信任对给定 IP 地址的任何访问 通过电子邮件将同一证书发送到

  • 单值或常量值时在 x 轴上绘制的样条图 - highchart

    while using the older version of highchart 2 1 6 if a plot had only one value or a series of same values it would plot a

  • UICollectionViewFlowLayout 使其布局无效后重绘单元格

    当您使布局无效时UICollectionViewFlowLayout它为每个单元格创建了一堆新的布局属性 然而 它不会告诉您的单元格重新绘制 这会导致任何图层绘图变形 我不想告诉我的集合重新加载其数据 因为这会删除流属性之间的任何良好转换

  • 尽早检测有问题的 XIB 视图

    我的笔尖名称有一个拼写错误 当我推向导航控制器时 它在代码中被破坏了 弄清楚它并没有花太长时间 但我认为最好尽早断言格式良好 以便更容易弄清楚 问题是它不是零 它只是无法从笔尖正确地形成自己 在 initWithNib 之后是否有更好的断言

  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq

  • 呈现为 Flexbox 的有序列表不显示项目符号/小数（项目也呈现为 Flexbox）

    我有一个有序列表 ol 有它的display属性设置为flex 列表项也呈现为弹性框 这样做会导致项目符号 数字 不再显示 有什么办法可以让项目符号显示在ol有课 questions questions likert 在40px的区域pad

  • 在 XCode 中本地化 HTML 文件

    我有一个本地化的 iOS 应用程序 我希望在其中包含一些本地化的 HTML 文件 我不知道该怎么做 目前 我的文件夹结构如下所示 myapp en lrproj Localizable strings fr lrproj Localizab

  • Xcode 7.2 无法连接到装有 iOS 9.2 的 iPhone

    出于开发目的 我已经在我的 iPhone 5s 上安装了 iOS 9 2 beta 当然 我还安装了Xcode 7 2 beta 当我想在设备上运行应用程序扩展 键盘 时 该应用程序会正确构建 安装在 iPhone 上并启动 然而 然后我在

  • 点击问题：动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li

  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function

  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3

  • Textview 中心文本对齐 IOS 7

    void observeValueForKeyPath NSString keyPath ofObject id object change NSDictionary change context void context NSLog He

  • 有没有办法防止输入 type=“number” 获得多个点值？

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性

  • 使用 jQuery 修改 HTML 表格的结构

    我有一个元素列表 X在以下示例中 显示在 HTML 表格的行或列中 从 HTML 代码的角度来看 我有 水平显示 table tr td A td td B td td C td tr table 或 垂直显示 table tr td A

  • 出现错误：FT_Open_Face 失败：错误 2

    当我使用时出现以下错误CGContextDrawPDFPage context PDFPage 对于某些文件 有解决办法来解决这个问题吗 FT Open Face failed error 2 错误2看起来像errno2 这是 找不到文件

随机推荐

  • 给定点的坐标，找到彼此之间存在一定距离的所有点对？

    如果两点之间的距离为 0 我以前见过这个问题几次 但我忘记了实现 我相信这与分而治之有关 即将平面分成两半并在平面的两侧递归 但我非常不确定这会如何解决 不需要任何代码 只需对此类问题的解决方案进行一般演练就足够了 您可能会想到的是四叉树

  • 反向图像存档：使用 CSS / Javascript 从下到上堆叠图像？

    想知道是否有人有解决方案 我想展示一个缩略图存档 最旧的缩略图位于底部 最新的缩略图位于顶部 我还希望流程本身被逆转 像这样 页面应右对齐 并将未来的图像添加到页面顶部 我正在使用 PHP 从 MySQL 数据库中提取图像文件名来动态创建页

  • JavaScript 中浮点数的除法

    我试图将屏幕宽度除以一个变量 以便在 web 视图中绘制等距的 UI 部分 然而 当变量为 3 时 100 3 在 JavaScript 中结果为 33 3333333333333336 并且第三部分无法按预期绘制 因为商的总和大于 100

  • AWS Lambda 调用函数（js sdk）：超时重置为默认值

    我正在运行一个 Meteor Node 4 4 7 应用程序 该应用程序在 AWS Lambda 上执行长时间操作 我从代码中调用 lambda 函数并等待响应 然后再继续下一次调用 我将超时设置为 300000ms 如前一个问题 http

  • NodeJS - 将 CSV 转换为 JSON 对象数组

    我正在尝试将以下 CSV 格式的数据转换为 JSON 对象数组 CSV formatted data apples oranges grapes peach pineapple JSON Object Array fruits name a

  • 当路由位于单独的模块中时，如何使用 Node+Mongo 进行连接池？ [复制]

    这个问题在这里已经有答案了 Mongo 文档展示了当 MongoClient 和服务器定义在同一模块中时如何设置连接池 var express require express var mongodb require mongodb var

  • 如何将Crashlytics集成到iOS框架项目中？

    我正在构建一个新的 iOS 框架 并希望将 Crashlytics 集成到其中 使用我点击的 Fabric io Mac 工具 New App并选择我的 iOS 框架 Xcode 项目 但是 在下一个屏幕 初始化 SDK 中 我收到以下错误

  • 基于对象的不同可空字段的比较器

    我有一个Employee包含两个字段的对象name and jobTitle 为了对员工对象进行排序 第一优先级应该是jobTitle if jobTitle为 null 则应根据名称排序 下面是 Employee 对象 public cl

  • 是否可以参考上述父母以外的其他父母？

    我有以下示例代码 level1 css level2 css level3 css color red And then level1 blue level level3 color blue 我想以某种方式将第二条规则放在代码的第一位上

  • 在 shell/Perl 脚本中保存密码的最佳实践？

    最近 我不得不重新学习 Perl 和 shell 脚本技能来帮助一些同事 相关同事的任务是从具有大型 Oracle 数据库后端的内部应用程序中提供一些报告 但他们根本不具备执行此操作的技能 虽然有些人可能会质疑我是否具备这些技能 笑 但显然

  • UITableView 滚动是否以一定的速度平滑？

    我正在构建一个自定义老虎机 其中有一列存在于 uitableview 中 当用户拉动控制杆时 表格视图应该滚动到带有索引的特定位置 我用的方法是 scrollToRowAtIndexPath atScrollPosition animate

  • 如何更改所有月份的所有工作日的颜色属性

    if e Day Date DayOfWeek DayOfWeek Monday e cell BackColor System Drwaing Color Red 我正在尝试此代码 但它只更改单个月份的属性 我想更改一年中所有月份的所有

  • 常量（标签文本等）应该出现在 WPF MVVM 应用程序中的何处

    我应该在 WPF MVVM 应用程序中的哪里为标签文本 按钮文本等创建常量 最佳做法是 在 ViewModel 中创建静态属性 在 Model 类中创建嵌套类并通过属性公开它 任何其他方式 请指教 我是 MVVM 新手 嗯 我真的很喜欢并且

  • 如何在控制台中获取按键事件

    我想要得到on key press event无需按 Enter 键 当然我需要字符代码 有解决办法吗 我建议通读一下here http en wikibooks org wiki A Little C Primer C Console I

  • scipy.signal.find_peaks 返回空属性

    我试图获得properties from scipy signal find peaks https docs scipy org doc scipy reference generated scipy signal find peaks

  • 放大时聚类标记不隐藏

    我正在尝试在地图上实现聚类标记 它的行为有点奇怪 首先 它向我显示聚类标记 但也向我显示点标记 这不应该发生 当我放大时集群标记仍然显示 我将添加一些图像来更好地解释它 public class MapaViagem extends Fra

  • 如何在 Eclipse Luna 4.4 中选择用于暂存视图的存储库？

    我无法找到 Eclipse Luna 4 4 中记录的错误的解决方案 我已将 git 存储库从 Github 克隆到我的 eclipse 工作区视图中 并将关联的 Maven 项目导入到我的项目空间中 然后 当我在 Eclipse 中显示暂

  • TypeOf 无法与实现接口的 Excel 工作簿的 ActiveSheet 一起使用

    我有一个公共不可创建界面PublicInterface Option Explicit Sub DoSomething End Sub 并且在same工作簿 我有一张纸 Sheet1 that 实施 PublicInterface Opti

  • Google 日历脚本：删除重复发生的事件

    我正在遍历事件电子表格并相应地修改我的日历 我可以用setRecurrence创建多日活动 但我不知道如何删除该课程并将其恢复为单日活动 了解这一点很重要 因为显然应用setRecurrence多次重复某个事件不会替换 重新定义现有的重复事

  • iPhone X 状态栏黑色网络应用程序

    我正在开发一个网络应用程序 并使用模拟器在 iPhone X 上进行测试 状态栏完全是黑色的 如何让我的网站覆盖整个屏幕 我没有使用任何图书馆 我看到很多问题都提到了 Cordova 但我所拥有的只是带有 CSS 的 HTML 这是我的 H

热门标签