据可靠消息，截至到目前，
iPhone Duo 即将到来，为移动端 H5 页面带来新的设计与适配命题。
据可靠消息，截至到目前，微信在 iPhone Duo 上并不支持平板模式，所以本套适配思路重点考虑在网页端适配的情况，毕竟“H5”也是移动端的网页。
本文结合国内专业H5工具意派 Epub360，提出一套概念版的H5页面可视区域规范，模拟多形态自动响应适配。
在开始之前，我们需要了解 iPhone Duo 6 种常规显示状态以及设计尺寸规范：
⦾ 折叠竖屏、折叠横屏
⦾ 展开横屏、展开竖屏
⦾ 展开横屏部分折叠、展开竖屏部分折叠（官方叫" 坐立状态 "）
以上设计规范来源于SafeArea，仅做示意。
注：其中折叠竖屏和展开横竖屏状态需要优先适配，其他例如支架等低频使用状态可不考虑或最后考虑。
综上，H5 页面要同时应对设备开合、屏幕旋转、 Webview 视口限制，规避文字被折痕切断、按钮点击失效、动画卡顿等情况。
另外，H5 页面在网页端打开，需要考虑固定的侧边控件栏，例如展开横屏下，状态栏、工具栏、全局标签栏全部移到了右侧，目的是节省垂直空间。
好了，搞清楚了以上 iPhone Duo 几块关键点的内容，我们需要落实到H5页面在实际场景下的适配。
因 H5 页面出色的创意互动性、组合动画和逻辑判断，需要考虑的信息要比一般的网页适配更具挑战性，需评估邀请函、测试题、合成海报、小游戏、全景、长图滚动、投票、抽奖等场景类型，我们根据适配核心原则，优先考虑折叠竖屏、展开竖屏、展开横屏三种高频屏幕状态的适配。
𝝞 适配核心原则
四层分区，是所有设计的底层逻辑。
⦾ 出血背景区
背景、底纹、装饰。可铺满屏幕，可穿过折痕区域。
⦾ 可视区
Webview 视口范围，画布跟随视口自适应。
⦾ 安全内容区
文字、标题、按钮、视频主体，尽量在此区域。
⦾ 折痕禁放区
交互元素、文字主体、触发热区避免放入。
𝝞 意派 Epub360｜ 两种实现思路
⦾ 思路 1｜单流自适应
一套内容，随设备形态自动重排，如邀请函、品牌长页、故事 H5。
编辑器配置要点
-
使用微信 PLUS 画布，开启背景图自适应、元素开启相对定位。
-
系统判断组件监听横竖屏视口宽高，自动切换布局。
-
Masterpage 添加 LOGO、图标等全局元素，设定相对位置显示。
⦾ 思路 2｜长期活动多版本切换
结合意派Epub360自定义画布，复制不同的页面版本，根据设备形态判断自动切换。
𝝞 模拟意派H5页面预览效果
主要三种屏幕状态下，测试不同的页面适配和交互触发情况。
1、折叠竖屏
设备闭合，常规手机形态，无物理折痕，可按照竖屏，例如测试邀请函场景，背景撑满，两侧预留出血展示。
2、展开竖屏
横向握持，折痕转为水平中线，屏幕上下分割，元素可自适应一屏展示，例如测试答题场景下可以全屏竖向展示。
3、展开横屏
屏幕完全展开，折痕垂直居中，屏幕分为左右两栏，例如文旅地图场景下可分两屏页面展示，左屏对应地图操作，右屏固定触发的弹窗。
以上为演示效果，非官方线上版本。
𝝞 其他注意项
展开状态下别只拉伸内容，从小屏到大屏要充分利用多出的空间。比如邮件详情页展开后，左侧增加邮件列表，而不是只改变详情宽度。
元素
-
背景图：可跨折痕；人像、LOGO 主体不要落在折痕线上。
-
内容图片：主体完整落在单侧安全区，禁止跨折痕，开启图片懒加载。
-
视频：放置在单侧安全区域；必须手动触发播放，开合切换自动暂停视频。
-
弹窗 / 浮层：居中相对定位，整体落在安全区内，避免被菜单栏遮挡。
动画
-
优先 Epub360 原生 CSS 动画，性能优于 GIF、序列帧。
-
动画元素不跨越折痕，左右 / 上下分组独立运行。
-
同元素请勿动画与动效混用，减轻 Webview 渲染压力。
-
设备开合瞬间，暂停全部动画执行，开合完成后恢复继续播放。
𝝞 总结与畅想
通过适配折叠屏 H5 页面，并非简单拉伸画布，应提前规划预先分区、感知设备形态、动态重排或设备尺寸切换。
我们可以借助意派 Epub360 的自定义画布、系统判断横竖屏、元素相对位置、背景画布缩放撑满显示，即可在 iPhone Duo 上体验稳定、优雅的 H5页面，同时，意派科技也将会继续跟踪，争取给出更好的官方适配方案。
拙见，H5主要的传播场景还是微信生态下，我们也期待在微信的适配下更好的兼容，增强更酷、更稳定的H5创意互动，未来我们或许可以善用 折叠、横竖屏、AB双屏互动的屏幕状态，吸引更多有想法的广告策划人，给这平淡的H5市场注入一针强心剂。
欢迎派友们在评论区讨论 ~
以上为意派运营团队提出适配 iPhone Duo 可视区域规范探讨，正式以实际为准。
文章来源于意派科技，转载请注明出处。