721
手机大全
iPhoneX的缺口已经有了新的解决方案
今天，Safari的Web浏览器引擎WebKit的团队详细介绍了设计人员如何为iPhone X构建网页站点。即将推出的iPhoneX传感器，也就是“缺口”，为设计师和开发人员带来了新的挑战。这为问题留下了一些实施创意“解决方案”。让WebKit 为iPhone X 制定一些官方指南应该有助于全球的网络开发者。
iPhone X的传感器将以目前的形式为网站带来设计挑战。苹果试图通过在任何一方填补网站的内容来尽早缓解此问题。对于具有全方位内容的站点，这种缓解可能比苹果预期的更不吸引人。许多网络开发人员可能会看到自己稍微调整他们的网站在即将到来的iPhone X上看起来尽可能好。WebKit的团队在设计iPhone X时提供了开发人员可以做的事情之前和之后的例子。
今天的文档与以前在CSS中解剖过的相似。WebKit博客解释说，要开始，开发人员应该以横向方式利用iPhone X的全尺寸。为此，开发人员需要viewport-fit=cover在其网站的元标记中实现。没有这样的话，网站可能无法拉伸并利用显示屏的全宽度，最终看起来很奇怪。
一旦viewport调整，内容现在可能会隐藏在传感器和前置摄像头下面。苹果公司指出，这里的下一步是说明iPhone X的安全区域。通过考虑安全区域，Web开发人员可以确保内容不会被传感器、摄像头或圆角所遮挡。
这是设计师的关键; 因为它的无边框设计，iPhone X只是将边框重新引入其软件。
从苹果设计的iPhone X网站：
为了实现这一点，iOS 11中的WebKit包括一个新的CSS函数，常量（）和一组四个预定义的常量，安全区域插入左边，安全区域插入右边，安全区域插入 - 顶部和安全区域 - 底部。当组合时，这些允许样式声明引用每侧安全区域的当前大小。
只有这两个变化，网络开发人员可以调整自己的网站在新的iPhone X上看起来尽可能好。奇怪的是，苹果还提到了这些min()和max()功能。这两者都比较新的CSS，但在Safari 11或iOS 11中都不可用。（苹果声称，它们将在未来版本的Safari技术预览版中提供。）
一直在尝试我们的网站的代码来解释iPhone X的传感器和摄像头区域。虽然在技术上并不具有挑战性，但是对于更复杂的站点布局来说，这可能是重要的工作。幸运的是，iPhone X的报告延迟可能会在传感器普遍采用的情况下购买网页开发者。
最后更新：2017-10-08 19:58:33