设备布局模式：灰色按钮的作用，以及为什么你有时会需要它

问题出在哪里

iOS 上的每一款浏览器，包括这款应用在内，都被要求使用 Apple 的 WebKit 引擎，这是平台层面的规定，不是谁走了捷径。iOS 上的 WebKit 对触控输入做了一些假设，而当页面是由第二块屏幕上的合成光标驱动时，这些假设就不再成立了。

问题主要集中在内嵌框架上。当一个网站把自身的一部分内容通过 iframe 从另一个域名加载进来时，该框架会被沙盒隔离，只能通过浏览器引擎自身的输入通道接收事件。Cookie 同意管理工具就是这样做的，支付表单、身份提供方的登录框，以及内嵌视频播放器也是如此。有时候，在外接显示器上生成的点击事件，无法传递到框架内部。

这些网站这样做也并非无意为之。把敏感控件隔离在跨域框架中，是一种刻意的反欺诈措施：页面中运行的自动化脚本无法伸手点击「支付」或「登录」按钮。这套机制确实很有效，只不过它在拦截自动化脚本的同时，也会连带拦下来自第二块屏幕、但完全合法的光标操作。

XeOS 已经尽力让这种情况变得少见。点击事件会通过 Shadow DOM 进行命中测试，包括封闭的 shadow root，这能覆盖大多数 Cookie 横幅的情况；焦点也会被正确定位到可编辑的宿主元素，而不是某个嵌套的子元素，因此聊天和笔记类网站上的文本输入框都能正常工作。但一个拒绝合成输入的跨域框架，是应用无法翻越的一堵墙。

四秒钟内的解决办法

XeOS 不会让你拔掉线缆，或者干脆放弃那个页面，而是把那扇窗口交给它能够完美驾驭的屏幕：你手机自己的屏幕。

1. 点击窗口角落的灰色手机按钮。
2. 该页面会出现在你 iPhone 或 iPad 自己的屏幕上，呈现正常的触控布局。
3. 完成那个之前无法操作的动作：接受横幅提示、点击登录按钮、填写银行卡信息。
4. 点按手机上的返回按钮，窗口就会回到外接显示器上，完全恢复到原来的位置。

整个过程不会重新加载页面，你的位置、滚动进度以及已输入的内容都会被完整保留。

竖屏还是横屏？

页面在手机上以哪种方向显示，由你自己决定。首次设置时会询问一次，之后也可以随时在设置中修改。

如果你在使用实体鼠标，建议选择横屏，这样在切回手机的短暂时间里，你能获得更大的可用宽度；如果你使用的是屏幕触控板，建议选择竖屏，因为那正是你此刻握持设备的方式。

什么时候会用到它

实际使用中，这基本可以归结为几种情况：第三方同意管理工具弹出的 Cookie 与同意横幅；把登录流程交给某个身份提供方处理的框架，「使用……登录」类按钮通常是最常见的元凶；出于上述同样原因，位于支付处理商框架中的支付字段；以及来自不同域名、嵌入在页面中的组件，例如地图、预订日历和聊天弹窗。

除此之外，网站本身，包括它的菜单、表单和视频，在外接显示器上都能正常工作。

为什么这不是一个漏洞

一个无法响应点击的页面，并不是 XeOS 忘记开发的功能，而是所有 iOS 应用都被要求使用的浏览器引擎自身的边界，这款应用的任何更新都无法改变它，因为应用根本不掌控那一层。应用能做到的，是让这个绕行过程尽可能短、并且不丢失任何数据。

而这个绕行确实很短：你只需在手机上点一下，随即就能回到大屏幕。