以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。?

24小時前，蘋果公司推出了iPhone X。隨之而來的是一個新的白色線條，幸福地坐在底部的觸摸板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。

頂部的黑色凹槽采用了許多最先進的技術：紅外攝像頭、環境感應器、光感傳感器等——所有這些都是用來支持面部識別的。

iPhone X?的頂部凹槽

這也意味著你從看視頻到玩游戲，始終會在價值1000 $的手機頂部看到一個黑色凹槽?-?但隨著時間的推移，這可能會讓人賞心悅目。為了適應這一點，蘋果公司在硬件，軟件和iOS交互方面做了很多變化，Safari的網站呈現就是其中之一。

在iPhone X上的網頁呈現

橫屏

在橫屏模式下，iPhone X呈現的是帶有白色條紋的網頁。盡管很多部分都有不同的顏色背景，蘋果自己的官網也是由這些白色的線條呈現。

能讓你的頁面更有特色的唯一方法是給你的手機網頁設置一個合適的背景顏色——一個確保大多數情況下與你的品牌/網站的顏色方案一致的顏色。

body {

background-color:#676767;

}

然而，在同一頁上有不同背景顏色、漸變或圖案的部分，仍然會在兩邊顯示選中的正文背景顏色。

豎屏

當手機在豎屏時(這也是人們最常用的方式)，當視窗貫穿所有的邊緣時，兩邊都沒有白色線條。

在豎屏模式下，iPhone X會在其周圍滲透至整個屏幕。它是浸入式的，這樣，視窗可以無縫地貫穿四邊的圓角。

此外，狀態和URL /導航條會占用網頁的自定義背景顏色。

這類似于Android上的Chrome，呈現主題顏色的元標簽，在整個狀態欄中占據網頁的主色。

<meta name="theme-color" content="#676767">

縱向方向打開了推動品牌顏色發展的新天地，并且進一步的縮小了漸進式網絡應用程序和本地應用程序之間的差距。另一方面，Safari上的橫屏網頁呈現與縱向有些關聯。隨著時間的推移，我們看看它是如何演變的也是一件有趣的事。

iPhone X的最佳頁面——https://thepeachstudio.com/iphone-x

圍繞新的設計指南-凹槽設計，蘋果公司強調iOS開發人員不會隱藏設備的圓角，或者在他們的應用程序凹槽周圍添加黑塊。

?

原文作者：Krishna Murari?

原文鏈接：https://medium.com/peachstudio/designing-responsive-webpages-for-the-iphone-x-c3fc55732409

?Mockplus做原型，更快更簡單，現在下載Mockplus，免費體驗暢快的原型設計之旅。

總結

以上是生活随笔為你收集整理的iPhone X 响应式网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。