|
| 1 | +--- |
| 2 | +title: Web View |
| 3 | +order: 60 |
| 4 | +--- |
| 5 | + |
| 6 | +Every mobile app built with NativePHP centers around a single native web view. The web view allows you to use whichever |
| 7 | +web technologies you are most comfortable with to build your app's user interface (UI). |
| 8 | + |
| 9 | +You're not limited to any one tool or framework — you can use Livewire, Vue, React, Svelte, HTMX... even jQuery! |
| 10 | +Whatever you're most comfortable with for building a web UI, you can use to build a mobile app with NativePHP. |
| 11 | + |
| 12 | +The web view is rendered to fill the entire view of your application and is intended to remain visible to your users at |
| 13 | +all times — except when another full-screen action takes place, such as accessing the camera or an in-app browser. |
| 14 | + |
| 15 | +## The Viewport |
| 16 | + |
| 17 | +Just like a normal browser, the web view has the concept of a **viewport** which represents the viewable area of the |
| 18 | +page. The viewport can be controlled with the `viewport` meta tag, just as you would in a traditional web application: |
| 19 | + |
| 20 | +```html |
| 21 | +<meta name="viewport" content="width=device-width, initial-scale=1"> |
| 22 | +``` |
| 23 | + |
| 24 | +### Disable Zoom |
| 25 | +When building mobile apps, you may want to have a little more control over the experience. For example, you may |
| 26 | +want to disable user-controlled zoom, allowing your app to behave similarly to a traditional native app. |
| 27 | + |
| 28 | +To achieve this, you can set `user-scalable=no`: |
| 29 | + |
| 30 | +```html |
| 31 | +<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| 32 | +``` |
| 33 | + |
| 34 | +## Edge-to-Edge |
| 35 | + |
| 36 | +To give you the most flexibility in how you design your app's UI, the web view occupies the entire screen, allowing you |
| 37 | +to render anything anywhere on the display whilst your app is in the foreground using just HTML, CSS and JavaScript. |
| 38 | + |
| 39 | +But you should bear in mind that not all parts of the display are visible to the user. Many devices have camera |
| 40 | +notches, rounded corners and curved displays. These areas may still be considered part of the `viewport`, but they may |
| 41 | +be invisible and/or non-interactive. |
| 42 | + |
| 43 | +To account for this in your UI, you should set the `viewport-fit=cover` option in your `viewport` meta tag and use the |
| 44 | +safe area insets. |
| 45 | + |
| 46 | +### Safe Areas |
| 47 | + |
| 48 | +Safe areas are the sections of the display which are not obscured by either a physical interruption (a rounded corner |
| 49 | +or camera), or some persistent UI, such as the Home Indicator (a.k.a. the bottom bar) or notch. |
| 50 | + |
| 51 | +Safe areas are calculated for your app by the device at runtime and adjust according to its orientation, allowing your |
| 52 | +UI to be responsive to the various device configurations with a simple and predictable set of CSS rules. |
| 53 | + |
| 54 | +The fundamental building blocks are a set of four values known as `insets`. These are injected into your pages as the |
| 55 | +following CSS variables: |
| 56 | + |
| 57 | +- `--inset-top` |
| 58 | +- `--inset-bottom` |
| 59 | +- `--inset-left` |
| 60 | +- `--inset-right` |
| 61 | + |
| 62 | +You can apply these insets in whichever way you need to build a usable interface. |
| 63 | + |
| 64 | +There is also a handy `nativephp-safe-area` CSS class that can be applied to most elements to ensure they sit within |
| 65 | +the safe areas of the display. |
| 66 | + |
| 67 | +Say you want a `fixed`-position header bar like this: |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +If you're using Tailwind, you might try something like this: |
| 72 | + |
| 73 | +```html |
| 74 | +<div class="fixed top-0 left-0 w-full bg-red-500"> |
| 75 | + ... |
| 76 | +</div> |
| 77 | +``` |
| 78 | + |
| 79 | +If you tried to do this without `viewport-fit=cover` and use of the safe areas, here's what you'd end up with in |
| 80 | +portrait view: |
| 81 | + |
| 82 | + |
| 83 | + |
| 84 | +And it may be even worse in landscape view: |
| 85 | + |
| 86 | + |
| 87 | + |
| 88 | +But by adding a few simple adjustments to our page, we can make it beautiful again: |
| 89 | + |
| 90 | +```html |
| 91 | +<body class="nativephp-safe-area"> |
| 92 | +<div class="fixed top-0 left-0 w-full bg-red-500 pl-[var(--inset-left)] pr-[var(--inset-right)]"> |
| 93 | + ... |
| 94 | +</div> |
| 95 | +``` |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +(Well, maybe we should lose the red...) |
| 100 | + |
| 101 | +With just a few simple adjustments, we've been able to define a layout that will work well on a multitude of devices |
| 102 | +without having to add complex calculations or lots of device-specific CSS rules to our code. |
0 commit comments