苹果的 iPhone X 拥有一块覆盖手机整个表面的屏幕，除了一个用于放置摄像头和其他各种组件的“刘海”。这在屏幕设计方面带来了一些尴尬的情况，例如将网站限制在“安全区域”以及在边缘出现白色条。然而，移除它并不难，在 body 上使用 background-color 即可。或者，将网站扩展到整个区域（无论刘海如何），您可以在 meta viewport 标签中添加 viewport-fit=cover。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
然后，您需要考虑任何重叠问题，这些问题通常由安全区域处理。有一些新的 CSS 可以帮助您解决这个问题。 Stephen Radford 的文档
为了处理可能需要的任何调整，iOS 11 版本的 Safari 包含了一些常量，这些常量可以在使用
viewport-fit=cover时使用。
safe-area-inset-topsafe-area-inset-rightsafe-area-inset-leftsafe-area-inset-bottom这可以添加到
margin、padding或绝对位置值（如top或left）中。我在网站上的主容器中添加了以下内容。
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
(更新：当 iPhone X 首次发布时，它使用 constant() 而不是 env()，但从 11.2 版本开始，constant() 已被标准化的 env() 取代)。
刘海、安全区域和固定定位之间还存在另一种尴尬情况。 Darryl Pogue 的报告
iOS 11 与早期版本的不同之处在于，webview 内容现在会尊重安全区域。这意味着，如果您有一个顶部为 top: 0 的固定位置元素的标题栏，它最初将在屏幕顶部下方 20 像素处渲染：与状态栏底部对齐。向下滚动时，它将向上移动到状态栏后面。向上滚动时，它将再次下降到状态栏下方（在 20 像素的间隙中留下一个尴尬的间隙，使内容在其中显示）。
您可以在这个视频片段中看到它有多糟糕。
幸运的是，这也是一个简单的解决方法，因为在 meta viewport 标签中添加 viewport-fit=cover 可以解决这个问题。
如果您要覆盖该视窗，您可能需要稍微聪明一点，以避免隐藏内容！
我认为我已经在横屏模式下修复了刘海问题 🍾 #iphoneX pic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) 2017 年 9 月 13 日
这似乎是苹果方面一个非常糟糕的设计决定。我真的很想鼓励开发者保留白色条，让用户认为“哇，这款手机不太适合浏览网页内容”。我们不应该做这种浏览器特有的“修复”（哦，我们称它为它真正的名称……“黑客”）。
还有其他人有这种观点吗？
我完全同意。更糟糕的是，它不是一个“浏览器特有的修复”（就像我们回到 IE6 时代那样……），而是一个单个浏览器在单个设备上的修复。 唉。
完全同意。
历史表明，乔布斯不在时，苹果在智能设计方面相当无能。
同意。我们正在见证另一个 Internet Explorer 的出现。
我完全同意您的观点。添加几行特定于供应商的代码来专门处理 iPhone X 感觉很奇怪。
您是对的，我完全同意！
不幸的是，一些大型公司会添加巧妙的修复，用户只会看到一些网站上存在白色条，并认为是网站的错。
我完全同意。
我赞成你！ :))
我完全同意你的观点，添加专有变量是苹果的一个错误决定。
我们仍然需要处理一些供应商前缀，而这些值是凭空出现的。
我同意。这个刘海真是太荒谬了。他们应该像三星 S8 一样把整个顶部都做成黑色条（顺便说一下，三星 S8 的屏占比更高）。
我同意！
问题是，如果用户对设备感到满意，他们永远不会怪罪设备。根据我的经验，用户总是怪罪网站。哦，你在使用 IE9，而这个现代的、符合标准的网站看起来不好？一定是网站的错。
你可以在 2007 年对 viewport 元标签提出几乎相同的论点。
公平地说，苹果的
viewport-fit是 现有标准的一部分，专门用于处理非矩形屏幕。他们在這裡按预期使用它。至于新的 CSS 常量，它们已 提交 给 CSS 工作组进行标准化。（原始提案、
constant()的拉取请求、安全区域变量的拉取请求）同意！这似乎是一个倒退的举动。
我完全同意。我不明白为什么苹果的糟糕设计应该决定设计。当设备取得进步时，网络通常会适应它（响应式设计以满足各种方面，针对高分辨率小屏幕的更好的设计规则等，等等）。
但为了补偿糟糕的设计而进行的调整，虽然有时是必要的，但似乎是一种倒退。正如你所说，人们需要看看它，并思考它是如何倒退的。
或者，只是接受他们买了一个屏幕上有条纹的设备。
无论如何，这都不是我们的责任。
@Peter 我们中没有人想要支持 IE(=Issue explorer)，但为了覆盖仍然使用 IE 的用户群，我们不得不这样做。同样，对于 iPhone，我们也必须提供支持。令人难过的是；这种笨拙的设计不会持续很长时间，但我们不得不为这款设备设计和开发多年。
我相信我们未来客户的浏览器窗口不仅会始终是矩形的。新的屏幕技术允许屏幕形状不规则，因此我相信这超出了苹果的范围。这种变化正在到来，我们开发者必须拥抱它。我认为
viewport-fit=cover是解决这个问题的一个好方法。形状奇特的屏幕并不一定需要自定义编程。这就是为什么这很糟糕。那些在滚动时碰撞进出的元素？很糟糕，难看，对用户来说很可怕，我们的受众。
而且，要根据每个可能的设备屏幕的可能的形状差异（基于方向）进行自定义编码？Bah，你是在浪费自己的时间和金钱，或者你的雇主或你的客户的时间和金钱。
考虑一下，如果我们有 300 种不同的屏幕类型需要编码，我们的代码会是什么样子？
从一般意义上说，已经存在奇特的屏幕，而且，在接下来的几年里，我们将看到这种趋势的普及程度。但仅仅因为苹果做了这件事，我绝不会马上接受它。我目睹了这种现象多年来不断发生。
最后，当苹果“勇敢”地回归矩形视窗时，每个人都会再次说他们有多么棒。因为没有人能想出让摄像头透过屏幕看到而没有刘海的方法，对吧？（哈哈，我已经有一些想法了）
我预测不会有刘海式的前置摄像头和传感器。:P 而且这项技术已经有一年了。（十年前我就见过透明屏幕了）
http://www.dailymail.co.uk/sciencetech/article-3822108/Panasonic-reveals-invisible-TV-Prototype-OLED-screen-turns-transparent-glass-not-use.html
说实话：作为网页开发者，我们的工作是创造性地寻找解决软件和硬件奇怪行为的方案，并为所有用户提供最佳体验。
仅仅建议忽略一个明显不同且难以适应的设备，而该设备可能很快就会获得巨大的市场份额，这是一个糟糕的决定。这让我想到那些（大多数是黑莓用户）认为没有物理按钮的手机是垃圾的人。看看当你因为必须改变而忽略事物时会得到什么？
当然这意味着工作，当然你很可能不会因为这个得到报酬，但也许我们很快就会需要为各种跟随苹果的设备实施这一点，并且这种问题可能会很快形成标准。
不是我。
苹果正在按预期使用 CSS 标准；在你认为它是黑客之前，也许你应该阅读一下他们的博文：为 iPhone X 设计网站。
以下是代码
除了
<meta>中的viewport=fit之外，这没什么大不了的。虽然苹果是通过这种方式实现的，但这是一种CSS 标准。唯一的问题是 W3C 将
constant重命名为env；到 iPhone X 实际发布（11 月初）时，我们将使用env来代替。与我们为支持 IE 所做的一切花招相比，这简直是小菜一碟。
旧的浏览器会跳过
@supports，而新的浏览器会自动做正确的事。iPhone 不会是唯一利用CSS Round Display Level 1的设备。我们应该坚持“移动优先”和“面向未来”的理念，对吧？
欢迎来到未来。;-)
@Max
与其争论我们不同意见和经验，因为这些都是因人而异的，我建议举一个现实世界的例子，说明刘海在屏幕上的糟糕表现，以及支持多种“形状”屏幕类型的所谓想法。
https://www.essential.com/
vs
https://www.apple.com/iphone-x/
两种手机的刘海尺寸是多少？刘海的位置在哪里？设备会将刘海的位置传递给浏览器和 CSS 吗？
据我所知，苹果不会告诉软件任何关于刘海的信息。只告诉它有一个名为“安全区域”的通用东西。对我来说，这意味着一个标准的矩形视图。
快进五年，会出现 100 种不同的屏幕类型和尺寸，多个版本的苹果自家设备将有不同的刘海尺寸，而你的代码无法判断你正在哪个屏幕上显示，也无法判断刘海的尺寸。甚至无法判断刘海位于哪一侧（可能是）。
刘海真的是刘海吗？如果它是倾斜的，或者弯曲的，那又怎么办呢？
如果苹果要强迫我们处理这种奇怪的形状，我们最好得到比“安全区域”元标签多得多的东西。
有趣的是，在苹果的主页上，目前显示着白色条形https://ibb.co/iejBg5
所以，如果有人不想使用 viewport-fit=cover，那么这是否可以解决标题栏问题？
当然，如果你想在顶部添加填充，你可能也需要 calc()。
不幸的是，不行。如果你不使用
viewport-fit=cover，那么 webview 的顶部（就 CSS 而言）实际上位于刘海下方。将内容移出屏幕不会将它们移到刘海后面。我只想提一下，如果你正在构建一个网站，并且它将在 Safari 中运行，那么你应该不会遇到
position: fixed元素的任何问题，因为 Safari 地址栏 UI 会自动处理顶部的刘海。我的博文更多地是从 Cordova/Phonegap/Ionic/Meteor 应用程序的角度来解决这个问题，这些应用程序使用全屏网站，需要处理刘海。@Darryl Pogue
现在在 iOS 11 中，position fixed 出现了问题。至少在横屏模式下，它的工作方式与 iOS 10 及更早版本不同，现在内容会在像 iPhone 5 这样的小型设备上跑到地址栏后面。
我绝对拒绝支持一台设备上的一种屏幕类型。这东西是死路一条。为什么？因为还有另一款手机也有刘海，而且尺寸不一样。
我从针对 iPad 屏幕吸取了教训，后来发现三星平板电脑略有不同，但 iPad 的样式不适用于它。
愚弄我一次。
现在，如果很大一部分设备都出现这种情况，那我们就该担心了。如果你有一个庞大的开发人员团队，只想要额外的任务，那就尽情玩吧。设计你的刘海吧。
你说得对，我们已经有很多事情要担心了，想象一下，如果所有品牌都拥有奇形怪状的屏幕形状和比例，那该怎么办。iPhone 浏览器应该弥补这一点。
看起来很糟糕，伙计。
你应该在文章中放一些图片，对我来说真的没什么意义。难道所有手机都没有一个用于摄像头等的顶部区域吗？为什么在 iPhone X 上它会变得如此尴尬？边缘的白色条形，难道通常不是被称为边距吗？边距对于更容易阅读页面至关重要。
感谢包含了 Vojtas 的推特帖子及其图片，事情变得更易于理解了。
并非所有手机的屏幕都延伸到传感器之外。事实上，大多数手机都没有，只有少数例外，但这些例外并不流行。
这篇文章提供了最佳的视觉图表，用于展示和理解安全区域的概念。
谢谢！这给了我一些想法，可以尝试在我们网站的新 iPhone 上使用。
这似乎是一个笨拙的解决方案，用来解决这个“问题”——为什么苹果（或者可能是 Safari / Chrome）不能在浏览器中添加填充，以便浏览器边缘位于刘海之外？
为什么每个开发者都要为这种浏览器怪癖调整？这又让我想起了 IE6 的年代。
我没有数据支持我的说法，但我感觉大多数手机上的网页浏览都是在纵向模式下进行的，只有在需要提高某些段落的可读性时才会转为横向模式。我觉得为了适应这种次要的使用场景而付出额外的努力，并且冒着测试不充分而导致可读性下降的风险，是不值得的。
并不是要否定这篇文章，毫无疑问，这些信息对某些人来说是有用的。
好吧，这个问题仍然会在纵向视图中出现，只是它们会在顶部和底部。
一个更大的问题是，谁会在手机上横向浏览网页呢？
我和 Nathan 想法一致。我不记得上次横向浏览手机是什么时候了。这并不是一个好的做法，因为你无法看到太多内容。如果网页设计师/开发者使他们的网站响应式，那么在手机竖直握持时会显得更好。
哈哈，我也有同样的想法:) 但是，仍然应该解决这个问题。
再讨厌不过了……
它又一次试图划清界限，将你我区分开来。
体验越一致，对所有用户在同一网站上的兼容性就越好。唯一一致的是浏览器。为什么我们不能达成一致？
如果我是政治家，我会说这是将用户分开的一种举动，就像极右翼分子在现实生活中所做的那样。
说实话，我浏览网站时从不使用横屏模式。除了播放视频，因为视频会全屏显示。
我很期待把时间花在为特定屏幕形状渲染上，而不是专注于用户体验。
请关注iEllipse，这款手机拥有椭圆形屏幕。确保重要的内容只渲染在屏幕中心25%的区域内。
接着是Galaxy Donut 9。这款手机的屏幕中间有一个洞，方便你放置饮料。确保你的网站围绕圆角矩形渲染（它不是完美的圆形）。
或者，制造商可以考虑遵循公认的标准，或者自己寻找解决方案，而不是将问题抛给开发人员。
https://www.xkcd.com/1889/
有时，xkcd.com上最好的评论出现在图像的title属性中。有人知道如何在移动浏览器中访问它们吗？当我看到手机上的xkcd链接时，我有点难过，因为我知道我会错过一些东西。 :(
以下是上述链接的title属性值。
hyark。
Android 版 Chrome，如果长按图像，通常会出现包含替代文本的上下文菜单。
除此之外，将地址从www.更改为m.，点击图像就会在另一个div中显示替代文本。
苹果的设计不是最好的，但我已经不记得上次用横屏模式浏览网页是什么时候了。
我一定会避开任何为了适应这款新 iPhone 而做的 CSS hack。
这个刘海设计真的很蠢。苹果对他们的设备收费很高，但他们甚至无法设计出更好的设备。他们为了制造一款全屏手机，对设计师和开发者不屑一顾。为什么不设计一个摄像头，在你需要自拍时从手机顶部弹出呢？
因为他们不是在设计1980年代儿童间谍玩具手机。。
如果苹果决定毁掉移动网站的视图，那不是我们的问题。这是他们自己的问题，我们不应该尝试修复它。只有当超过2%的网站访问者使用iPhone X浏览时，我们才应该在自己的网站上进行修复。我们知道，这几乎不可能发生。永远不会。
没错。为什么我们要为了他们高高在上的象牙塔而做各种曲折的设计决策？如果手机不能很好地显示内容，那就是手机（和苹果）的错误，不是我们的错误。
以下是一个处理这个问题的建议：什么也不做。一家公司做了一个愚蠢的设计决策，却想让全世界为它买单？你上次什么时候赞扬一个浏览器制造商因为类似这种专有的垃圾而逃脱了惩罚？如果Internet Explorer 要求这种愚蠢的设计，每个人都会扔掉他们的玩具，那么为什么现在不能这样做呢？
我完全同意 - 如果我们继续迎合他们糟糕的决策，他们就会继续逍遥法外。如果（我知道这有点像白日梦）全世界都拒绝迎合这个刘海，那么也许苹果和其他公司会注意到，并在将来将其纳入考量。
这真是令人印象深刻的胡说八道。
苹果正在从他们的象牙塔中做出灾难性的糟糕设计决策。作为一个终生的苹果用户，我忍不住要看看其他地方，发现三星正在以美丽、标志性的方式突破界限，而苹果却吹嘘自己，生产出垃圾产品。
我拒绝围绕这个硬件缺陷进行设计。
抱歉，苹果。下次不要这么愚蠢和自大。
我正在认真考虑换用（不寒而栗）Android。
不要害怕Android。我最近买了华为P10 Lite，这款手机在很多方面都比iPhone好。做工、性能、存储、电池、声音、屏幕……甚至指纹传感器也更好更快。
没有乔布斯，苹果就只能靠过去的辉煌来维持。如果你还记得苹果的历史，当时乔布斯不在担任首席执行官的时候，在他忙于皮克斯和NeXT电脑的时候，他们犯了和现在一样的错误 - 很多不同的型号/产品和不一致的设计。
糟糕，糟糕，糟糕的设计！
这让我想起我们 - 网页开发者 - 试图在Android浏览器上抑制一个像素的Chrome边框。我们一直在破解Android的问题，最终是毫无用处的，因为这是一个Android问题，而不是HTML / CSS问题。我们不应该去做这种工作。
Jens Meiert有一篇很棒的文章解释了为什么我们不应该做这种事情：https://meiert.com/en/blog/staying-clear-of-user-agents/
另一方面，我不确定这是否是一个类似的问题。我刚知道这件事。
我认为开发者社区只需要集体站出来说“去你的”并拒绝支持适应这种程度的 BS 的设计。
从产品设计角度来看，是谁做出了这个$h!#，并说，“嗯，这样就足够了，我们只要为这款设备创建一个hack就行了”？哦，没错，是苹果！！
我非常同意几乎所有对此发表评论的人，他们认为用自定义代码来支持这种做法是件坏事（我不介意设置一个body背景 - 这是应该做的），但是为了适应单个设备上的单个浏览器而做的任何额外操作，网页设计师都应该像瘟疫一样避开。
我希望看到UI开发者开始将重要元素放在“刘海”区域内，而不是避免它。也许是一个只有我们这些穷人才能看到的特价商品横幅，因为我们买不起iPhone X。或者也许是一个特殊的菜单。我能想象出一些创造性的用法，例如“富人炫耀的遮罩”。
这将是一个更好的使用该区域的方法。
但你需要确保你放在那里的东西要么没有重要到需要在其他设备上显示，要么不会“不协调”到足以让它在其他设备上看起来很奇怪。
Vojta的修复方案似乎只针对他示例中极其简单的内容；我怀疑这样的修复方案是否能与大多数布局元素很好地配合。
史蒂夫·乔布斯会允许这种程度的标准违反吗？到底什么是刘海对用户的益处？多了几个像素的视窗？
强迫开发者构建复杂、hacky的变通方案，只是为了满足单个设备上单个浏览器特有的奇怪显示问题，这不是我认为的创新。我们以前见过这种情况，但哇，我们在2017年再次看到它，还是在苹果的旗舰设备上？
对开发者来说，好的一面是网站所有者会希望或要求他们的网站符合新设备，这意味着要花很多时间来实施变通方案。
这是对旧的“这是一个特性，不是一个错误”模因的有趣诠释。
去他的吧。让网站保持原样。聪明的用户会怪罪手机。不太聪明的用户会继续购买苹果产品。
我拒绝支持糟糕的设备设计。
苹果会以这种方式设计手机奇怪吗？既是又是。无论如何，我仍然需要构建网站。我将不得不围绕这个障碍进行设计。但这就是网页开发者的生活。为不合理的东西进行设计。
感谢这篇文章和提醒。我将把它添加到我的“hack”列表中:)
我认为更大的问题是测试它。Chrome可能不会将新设计添加到Inspector中，而且没有多少人使用Browserstack之类的工具，所以除非你真的拥有X，否则只能靠猜测和祈祷它能正常工作。
如果你有一台Mac，你可以在iPhone Simulator中进行测试，它是Xcode 9的一部分，可以免费下载；如果你有Apple开发者账号，你现在就可以下载Xcode 9：https://developer.apple.com/xcode/
所以为了开发一个iOS应用程序，你需要一台Mac，而且如果你想让网站/应用程序在iPhone X上看起来不错，你也需要一台Mac！！！这太扯了！！
为什么苹果不用真正的“移动网页应用状态栏样式”来改变这个白条呢？就像这样
<!-- Chrome、Firefox OS 和 Opera --><meta name="theme-color" content="#ff0000">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ff0000">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ff0000">
在我见过的多数应用中，它们使用与背景不同的颜色来显示状态栏。所以你最终还是会在屏幕两侧看到不同的颜色条（尽管它们应该比白色更符合你的调色板）。
我不知道为什么会有那么多仇恨？
我认为 @grorg 的这篇声明 已经解释得很清楚了。
我认为你将这个问题描述得太极端了，你暗示了其中存在仇恨。愤怒和厌恶？也许，或者更可能是恼怒和烦躁。
我认为答案很简单，苹果的傲慢自大。他们似乎表现出一种态度，认为他们在设计上做出的任何选择都是“好的”。还记得他们移除耳机孔时的“勇敢”说法吗？（我希望你没有完全相信这种欺骗行为）你认为这不会在一定程度上影响到其他所有手机和用户吗？
没有应用的 iPhone 会是什么样子？浏览器是其中之一，而这个网站上的大多数读者都是浏览器开发者。然而，我们关心的是一个开放的生态系统。也许你年纪不够大，无法回忆起微软等其他公司在过去几年中给我们带来的巨大负担，迫使我们去支持他们做出的糟糕决定。我们再也不愿意经历这样的事情。尤其是现在，我们已经有了历史的教训，清楚地指明了我们应该走的方向，以及应该避免什么。
现在，苹果又带来了一个全新的乱象。你链接的评论很有启发性。但你不禁要问，为什么需要这篇评论？为什么苹果一开始没有公开说明？为什么它被隐藏在 GitHub 上的一篇帖子评论页面的中间位置？
对不起，如果这个问题已经问过并得到解答。除了 Safari 之外，
constant()、var()和viewport-fit=cover在其他移动浏览器中的支持情况会怎么样？constant()——已经被重命名为env()——将在各种浏览器推出对 CSS 值和单位模块级别 4 的支持时实现。@viewport-fit已经是 CSS 圆形显示级别 1 的一部分，因此其他浏览器只需要实现它就可以了。由于 Safari 是唯一可以在 iOS 上原生运行的浏览器，因此其他移动浏览器不是问题。Firefox 和 Chrome for iOS 在后台使用 WebKit，因此它们已经支持了这些新功能。
我怀疑，如果或当 Google 推出能够从中获益的设备时，Chrome for Android 会添加对它们的 supports。
苹果什么时候开始使用 IE 的规格了？
苹果的设计真的太糟糕了——需要重新设计。
我决定忽略关于“刘海”是否是一个好的硬件设计、我们是否应该被“强迫”支持 iPhone X、或者“任何人”是否在手机上使用横屏浏览的争论。
对我来说，真正的决定来自我在 Xcode 中的 iPhone X 模拟器中浏览我的网站，看看它们在没有我干预的情况下，在横屏模式下，默认情况下两侧带有“安全区域”边距时的样子。我对它们的外观很不满意。一点也不。
所以，我实现了苹果建议的解决方案。将它添加到我的网站的响应式 CSS 中非常简单——从头到尾，可能只花了我几个小时来更新我的模板和 CSS，然后调整一切，直到它们看起来符合我的预期。老实说，唯一痛苦的部分是不得不使用模拟器而不是在真实设备上进行测试。
对我来说，底线是实施这一改变将为我的网站访问者带来更好的体验。