Web 视图
使用 NativePHP 构建的每个移动应用都围绕一个原生 Web 视图。Web 视图允许你使用你最熟悉的任何 Web 技术来构建应用的用户界面 (UI)。
你不限于任何一种工具或框架——你可以使用 Livewire、Vue、React、Svelte、HTMX...甚至 jQuery！无论你最熟悉什么来构建 Web UI，你都可以用它来使用 NativePHP 构建移动应用。
Web 视图被渲染为填充应用程序的整个视图，并旨在始终对用户可见——除非发生另一个全屏操作，例如访问相机或应用内浏览器。
视口
就像普通浏览器一样，Web 视图有一个视口的概念，它代表页面的可视区域。视口可以使用 viewport meta 标签控制，就像在传统 Web 应用程序中一样：
<meta name="viewport" content="width=device-width, initial-scale=1">禁用缩放
在构建移动应用时，你可能希望对体验有更多控制。例如，你可能想禁用用户控制的缩放，让你的应用表现得像传统的原生应用一样。
要实现这一点，你可以设置 user-scalable=no：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">边到边
为了给你设计应用 UI 的最大灵活性，Web 视图占据整个屏幕，允许你在应用处于前台时仅使用 HTML、CSS 和 JavaScript 在显示器的任何位置渲染任何内容。
但你应该记住，并非显示器的所有部分对用户都是可见的。许多设备有相机缺口、圆角和曲面显示器。这些区域可能仍被视为 viewport 的一部分，但它们可能是不可见的和/或非交互的。
要在你的 UI 中考虑这一点，你应该在 viewport meta 标签中设置 viewport-fit=cover 选项并使用安全区域内边距。
安全区域
安全区域是显示器中不被物理中断（圆角或相机）或某些持久 UI（如主页指示器（又名底部栏）或缺口）遮挡的部分。
安全区域由设备在运行时为你的应用计算，并根据其方向进行调整，使你的 UI 能够通过一组简单且可预测的 CSS 规则响应各种设备配置。
基本构建块是一组四个值，称为 insets。这些作为以下 CSS 变量注入到你的页面中：
--inset-top--inset-bottom--inset-left--inset-right
你可以以任何需要的方式应用这些内边距来构建可用的界面。
还有一个方便的 nativephp-safe-area CSS 类，可以应用于大多数元素，以确保它们位于显示器的安全区域内。
假设你想要一个像这样的 fixed 定位的标题栏：
如果你使用 Tailwind，你可能会尝试这样的东西：
<div class="fixed top-0 left-0 w-full bg-red-500">
...
</div>如果你尝试在没有 viewport-fit=cover 和使用安全区域的情况下这样做，这是你在纵向视图中得到的结果：
在横向视图中可能更糟：
但通过对我们的页面进行一些简单的调整，我们可以使它再次变得美观（好吧，也许我们应该去掉红色...）：
<body class="nativephp-safe-area">
<div class="fixed top-0 left-0 w-full bg-red-500 pl-[var(--inset-left)] pr-[var(--inset-right)]">
...
</div>状态栏样式
在 Android 上，状态栏中的图标不会根据应用中的背景颜色自动更改颜色。默认情况下，它们根据设备是否处于浅色/深色模式而更改。
如果你在浅色和深色模式下都有一致的背景颜色，你可以使用 nativephp.status_bar_style 配置键为你的应用设置适当的状态栏样式，以给用户最佳体验。
可能的选项是：
auto- 默认值，根据设备的深色模式设置更改light- 如果你的应用背景是深色的，这是理想的选择dark- 如果你的应用背景是浅色的，这更好
缺少配置键？
如果你的 config/nativephp.php 文件缺少较新的配置键，你可以简单地添加它们！从 vendor/nativephp/mobile/config/nativephp.php 中的此配置文件的默认版本引用它们。
或者，你可以通过运行以下命令强制发布配置文件：
php artisan vendor:publish --tag=nativephp-mobile-config --force但请注意，这将覆盖你对此配置文件副本所做的任何更改。
通过几个小的更改，我们已经能够定义一个在许多设备上都能很好工作的布局，而无需向我们的代码添加复杂的计算或大量特定于设备的 CSS 规则。