Apple 正积极探索软件层面的解决方案,以修复其新款折叠屏手机 iPhone Duo 上备受诟病的 Safari 布局问题。针对早期评测普遍指出该机紧凑外屏上的移动网页浏览体验显得局促拥挤,WebKit 开发者顾问 Jen Simmons 在 WebKit 官方博客上证实,Apple 希望为网页设计师提供更好的方式,以充分利用外屏的全部显示空间。
这一布局痛点随着 iPhone Duo 的正式发售而浮出水面。作为 Apple 首款书本式折叠屏设备,iPhone Duo 搭载了一块 5.4-inch 的外屏,展开后则是一块更大的 7.6-inch 折叠内屏。尽管宽大的内屏在网页浏览方面赢得了广泛好评,但折叠闭合状态下的网页阅读体验却出人意料地别扭。Safari 目前的界面将常驻控制栏放置在屏幕右侧,使得本就狭窄的视口横向空间被明显压缩。Apple 目前正在征求开发者的意见,致力于制定一个更优雅、基于标准的解决之道。
Apple 在 WebKit 博客上的声明
在对随 iPhone Duo 独家推出的 Safari 27.1 版本的综述文章中,Jen Simmons 详述了 WebKit 如何处理 Apple 这款折叠设备的独特双屏架构。至关重要的是,她直接承认了影响外屏视觉体验的空间瓶颈。
Simmons 指出,Safari 目前会阻止网页延伸到浏览器右侧对齐的控制栏下方。取而代之的是,Safari 仅使用网页的背景颜色来填充该垂直间隙,以在不破坏内容可读性的前提下维持视觉上的区分。Apple 承认这只是一种权宜之计,并非理想的长期设计方案。
“我们希望赋予网页设计师和开发者以更具创意的方式来设计和利用这片空间的能力,”Simmons 写道,“例如,您可能希望将网页标题栏的背景延伸到整个屏幕宽度。表面上看似乎只有一种显而易见的实现途径,但实际上存在诸多可能性。”
技术难题:为何外屏浏览显得拥挤
Photo: gizchina.com (source)
问题的根源在于 iPhone Duo 的工业设计与界面几何布局。外屏面板尺寸为 5.4 inches,在物理尺寸上比标准的基础款 iPhone 屏幕更窄。
当握持闭合状态下的手机时,Safari 会在屏幕右侧布置一条垂直控制栏。这一列整合了多项关键元素,包括:
- 前置摄像头传感器挖孔以及系统时钟
- Safari 导航按钮:“前进”与“后退”
- 阅读器模式、新建标签页以及标签页概览视图的快捷触发入口
由于这一控制条占据了宝贵的横向宽度,网页内容的实际渲染视口被大幅向内挤压。对于使用悬浮式导航菜单、吸顶式 Cookie 授权横幅以及醒目社交分享栏的网站,外屏上文章的实际可读区域可能会缩减到仅剩屏幕的一小部分。一旦因输入表单或搜索栏而唤起屏幕键盘,垂直与横向的可视空间便会进一步恶化。
为什么简单的 CSS 修复方案行不通
不少技术爱好者和开发者质疑,Apple 为何不直接启用 viewport-fit=cover——这是一个现有的 HTML 元标签参数,允许网页内容延伸至设备的安全区域边缘。
然而 Simmons 表示,采用一刀切式的全局覆盖会在现实中导致严重的显示破损。尽管前沿网站能够妥善处理诸如 safe-area-inset-* 等 CSS 环境变量,但数以百万计的遗留网站根本没有针对全部四个边距做内边距适配。若默认强制全屏延伸,可能会直接将可点击的导航栏、文本或交互按钮遮挡在 Safari 的固定控制条正后方。
“我们正在调查是否存在更好的方式来实现同样的效果——某种更可靠、且可能对开发者而言更容易使用的方案,”Simmons 解释道,并邀请网页开发者向 WebKit 的 Bug 追踪系统及网络标准讨论渠道提交架构层面的提案。
| 显示模式 | 物理屏幕尺寸 | 有效视口宽度 | 浏览体验 |
|---|---|---|---|
| iPhone Duo 外屏 | 5.4 inches | ~382 CSS pixels | 内容列狭窄,受垂直控制条限制 |
| iPhone Duo 内屏 | 7.6 inches | 可达 951 CSS pixels | 平板级别的开阔布局;支持双标签页并排与书本式阅读 |
| 标准 iPhone | 6.1 – 6.9 inches | ~393 – 440 CSS pixels | 传统的底部工具栏布局,支持完整水平延伸 |
Safari 27.1 中已上线的折叠屏新特性
Photo: gizchina.com (source)
尽管针对外屏的布局优化仍在推进中,但 Safari 27.1 确实已经包含了数项专为折叠硬件打造的新功能:
- 书本姿态双页 PDF:当 iPhone Duo 以类似笔记本电脑或书本的角度半开支撑时,Safari 会自动将在线 PDF 文件沿着内部铰链拆分为左右跨页显示。将设备完全摊平或合上则会立即切回单页连续滚动视图。
- 设备姿态 API(Device Posture API):作为 Safari 高级功能开关下的实验性预览版推出,该网络标准允许开发者检测手机处于合上、平铺展开还是对折状态。
- 视口分段 API(Viewport Segments API):同样在功能开关中提供,该工具可帮助 CSS 获取物理折痕的坐标,使网页应用可以在屏幕折缝两侧拆分菜单和内容而不发生画面变形。
- Xcode 模拟器工具:使用 Xcode 27.1 的开发者能够获得完整的 iPhone Duo 视口模拟环境,覆盖从 382 to 951 CSS pixels 的宽度区间。
评测者与社区反响
WebKit 团队的坦率表态印证了首批拿到机器的评测者的一致反馈,他们均注意到了该机内外双屏之间的明显反差。Chance Miller 在 9to5Mac 上的评测中直接指出了这种体验隔阂:
“目前的网页根本没有针对这种形态进行优化……iPhone Duo 上右侧对齐的控制栏极大地占用了 Safari 的有效屏幕空间。我能理解 Apple 为何在 iPhone Duo 的 Safari 上采用这种设计,让控件直接与网页重叠确实也不合理。但无论如何,Safari 滚动浏览正是内屏体验远胜于外屏的最典型例子。”
同样,John Gruber 在 Daring Fireball 上指出,尽管展开后的 7.6-inch 内部面板带来了 Apple 迄今最优秀的便携阅读体验之一,但狭窄的外屏在执行快速单手操作时往往让人感觉局促拥挤。社交平台上的广大网页开发社区则对 WebKit 团队开诚布公地沟通表示赞赏,而不是悄悄推出漏洞百出的自动缩放或暴力裁剪方案。
给 iPhone Duo 用户的实用建议
Photo: gizchina.com (source)
如果您已经购买了 iPhone Duo,并且在外屏上经常遭遇排版变形或文章内容被挤压的困扰,目前有几个内置功能可以有效缓解这一体验:
- 切换至 Safari 阅读器:轻点右侧栏中的阅读器图标。阅读器模式会去除广告、吸顶标题栏和侧边留白,重新排版纯文本以整洁地填满整个可视列。
- 调整页面缩放比例:在 Safari 地址栏菜单中,将外屏的默认页面缩放比例降低至 85% 或 75%。这可以在不破坏版面比例的前提下,触发更宽的响应式桌面或平板断点。
- 谨慎使用“请求桌面网站”功能:虽然请求桌面版网页可以强制显示完整的导航菜单,但这往往会导致正文字体在 5.4-inch 玻璃面板上变得极其微小。建议仅在填写复杂表格时使用桌面模式。
- 展开设备浏览:进行深度长文阅读时,直接展开手机即可无缝将浏览会话过渡至开阔的 7.6-inch 大屏,且不会丢失当前的滚动进度。
下一步动向
Apple 尚未承诺将在哪一个具体的次级小版本中推出外屏修复方案。常规 iPhone 机型预计将直接从 iOS 27.0 升级至 iOS 27.2,而 iPhone Duo 目前运行着独立的 iOS 27.1 分支版本。
WebKit 工程师正在仔细评估开发者提交的反馈,探讨是否引入全新的 CSS 环境属性或浏览器控制栏半透明模式。预计未来的 iOS 27 开发者测试版将引入更为优化的启发式算法,在将顶部横幅安全延伸至右侧栏区域的同时,保证网站的交互元素依旧停留在主要触控安全区内。
常见问题
为什么 Safari 在 iPhone Duo 外屏上的视觉界面与普通手机不同? 为了适应较窄的屏幕比例及前置摄像头挖孔,Safari 将核心导航与标签页工具集中到了屏幕右侧的常驻垂直控制栏中,这直接收窄了网页正文的可视宽度。
Apple 何时会发布针对这一拥挤布局的修复更新? Apple 已确认正在研究修复手段,但 WebKit 团队尚未公布针对该布局重构的具体发布日期或系统更新版本号。
网站管理者目前能自行修复这个问题吗? 尚无法完全自主解决。因为 Safari 27.1 在机制上阻止了网页内容绘制在右侧控制栏下方,在 WebKit 推出新的标准接口之前,设计师无法强制让自定义内容延伸至控件底层。
这种局促的设计是否会影响 iPhone Duo 的内屏浏览? 不会。展开后的 7.6-inch 内屏采用标准的 iPad 风格或全宽桌面视口,能为工具栏和并排网页列提供充裕的展示空间。




