# iPhone Duo WKWebView Guide: Viewports, Safe Areas & Keyboards

> Give WKWebView and the page clear ownership of layout, safe-area padding, input and state. Keep a responsive fallback that works without experimental flags. Safari’s opt-in fold-related APIs do not, by themselves, establish equivalent support in an app’s WKWebView.

Author: Plurigent
Content version: 0.13.1
Source review: Oct 4, 2026
Applies to: WKWebView; Vue or similar web UI; iOS 27.1 layout changes; CSS viewport and safe-area handling
Verification status: Apple Staff’s Safari experimental-feature answer reviewed October 4, 2026; earlier WebKit viewport and scroll-anchoring references retain their dated scope. No Safari flag was changed, native code compiled or iPhone Duo WKWebView session tested.
Original page: https://plurigent.com/tutorials/iphone-duo/webview

Coordinate native and web layout while resizing, preserve input and scroll state, and distinguish default behavior from opt-in Safari experiments. Includes a Vue example.

Scope: official sources and practical guidance. Runtime measurements and hands-on observations are labeled separately and should be rechecked against the stated versions.

Reading scope: For Developers
Content formats: Reference

## Agree who owns each part of the available space

Evidence type: Practical guidance

For each page type, document the native–web boundary. Is the WebView already inside a safe area? Does the web page add its own padding? Which layer owns scrolling? Which layer changes the content region when a keyboard appears?

During debugging, record both native container dimensions and the web viewport. When the outer bounds are wrong, stacking compensating CSS values only makes the next case harder to diagnose.

For edge-to-edge web content, CSS safe-area environment variables can participate in the web layer. First confirm whether the native container has already inset the WebView, because applying the same protection in both layers can create double padding.

| Native layer | Web layer |
| --- | --- |
| Own WebView constraints and container updates | Reflow content within the supplied area |
| Document whether outer layout handles safe areas | Avoid adding the same inset twice |
| Preserve the page instance and recoverable business context | Maintain form state, routing, and scroll policy |
| Expose agreed business bridge interfaces | Do not guess native layout state from a device model |

[A03 · Prepare your app for iPhone Duo](https://developer.apple.com/videos/play/tech-talks/111461/)
[W02 · Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)

## Dynamic viewport units are useful signals, not a device model

Evidence type: Official information

WebKit documents svh, lvh, and dvh; dvh represents dynamic viewport height. These are web-platform primitives, not a complete solution to every software-keyboard obstruction and not iPhone Duo-specific APIs.

Apple’s published developer Q&A identifies Viewport Segments and Device Posture as opt-in experimental features in iOS 27.1. For a Safari experiment, the answer points to Settings → Apps → Safari → Advanced → Feature Flags. Record which flags are enabled, and retain a useful responsive layout when they are off.

A successful Safari experiment does not prove that the same APIs are enabled or behave identically in your app’s WKWebView. Check the actual OS, embedding configuration and exposed APIs before using them, with a fallback for unavailable features.

[W01 · New WebKit Features in Safari 15.4](https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/)
[Q01 · Apple Staff · A Summary of the iPhone Duo Group Lab](https://origin-devforums.apple.com/forums/thread/847644)

## Safari 27 adds scroll anchoring

Evidence type: Official information

Safari 27.0 supports scroll anchoring to help keep the reading position stable when content is inserted above the viewport. It is enabled by default; overflow-anchor: none opts a region out.

Test how this interacts with a Vue list’s own scroll restoration, especially during asynchronous inserts and container resizing. This is web-engine release guidance, not proof that a particular iPhone Duo WKWebView flow has passed testing.

[W03 · WebKit Features for Safari 27.0](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/)

## A basic content-container example

Evidence type: Practical guidance

This example demonstrates a width limit, shrinkable content, and progressive height declarations. Whether to use safe-area-inset and how to handle keyboards or overlays depends on the actual container contract; it is not a universal patch.

```css
.content-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
}

.form-content {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

.form-content input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
```
Original web layout example. Not a complete page, and not device-tested in iPhone Duo WKWebView.


## A size change is not a new business task

Evidence type: Practical guidance

For a Vue page, first inspect component identity, conditional branches, and refresh logic. Moving from one column to two does not necessarily require destroying and recreating the form. Decide component lifetime separately from visual layout.

Check transitions during typing, validation, pending requests, and open dialogs. Read network activity alongside page state: a clean-looking screenshot does not prove there were no duplicate requests.


## A minimum set of hybrid-page checks

Evidence type: Practical guidance

These are proposed checks to execute, not results that have already passed. Pair them with the broader iPhone Duo App Testing matrix and record expected and actual behavior for each transition.

Record Safari and app-hosted WKWebView as separate environments. Include the OS/build, viewport and window, keyboard state and any explicitly enabled experimental flags. The rows below are proposed checks, not completed results.

| Scenario | Change | What to verify |
| --- | --- | --- |
| Typing | Available width and height change | Values, focus, and action reachability |
| Request in progress | Layout transition or return to foreground | No unintended repeat request; feedback survives |
| Dialog open | Parent container changes | Overlay remains dismissible and does not block the task |
| Long list | Narrow the space, then restore it | Position remains reasonable and scroll policy is explicit |
| Safari · default settings | Fold, resize and focus an input with experimental flags off | The responsive fallback remains usable without posture/segment APIs |
| Safari · opt-in experiment | Repeat with the exact tested Feature Flags recorded | Compare optional behavior with the default baseline; do not infer WKWebView support |
| App-hosted WKWebView | Repeat in the actual app and OS build | Verify exposed APIs, native padding and preserved task state independently |


## Sources & review scope

- [A03 · Prepare your app for iPhone Duo](https://developer.apple.com/videos/play/tech-talks/111461/) — Oct 4, 2026; Selected preparation transcript passages reviewed October 4 for system containers and task continuity. No native SDK compilation or device/runtime measurement.
- [W02 · Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) — Sep 21, 2026; Reviewed viewport-fit=cover and CSS env(safe-area-inset-*) behavior as web-platform background for edge-to-edge layouts; this source is not iPhone Duo-specific.
- [W01 · New WebKit Features in Safari 15.4](https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/) — Sep 20, 2026; Dynamic viewport-unit explanation reviewed. Historical web-platform background, not iPhone Duo WebView certification.
- [Q01 · Apple Staff · A Summary of the iPhone Duo Group Lab](https://origin-devforums.apple.com/forums/thread/847644) — Oct 4, 2026; Selected written answers reviewed: opt-in Safari experiments and container distinctions. Not a full Group Lab video review, SDK availability table or live execution test.
- [W03 · WebKit Features for Safari 27.0](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/) — Sep 23, 2026; Reviewed scroll anchoring and related scrolling fixes. Safari release information is not a claim of iPhone Duo WKWebView runtime verification.

## Keep reading

- [iPhone Duo Safe Area Insets & Layout Margins](https://plurigent.com/tutorials/iphone-duo/safe-area)
- [iPhone Duo Adaptive Layout: Design Across Displays](https://plurigent.com/tutorials/iphone-duo/adaptive-layout)
- [iPhone Duo App Testing Checklist](https://plurigent.com/tutorials/iphone-duo/app-testing)