今天，iPhone X正式發(fā)售。接下來是一條新的白線，它快樂地坐在底部觸摸板上，取代了原來的主頁按鈕。這也喚起了一個懷舊的物理家庭鑰匙復合體。

頂部的黑色凹槽采用了許多最先進的技術：紅外攝像機，環(huán)境傳感器，光傳感器等。——所有這些都用于支持面部識別。

　iPhone X 的頂部凹槽

這也意味著從觀看視頻到玩游戲，你總會在價值1000美元的手機上看到黑色凹槽 - 但隨著時間的推移，這可能會令人賞心悅目。為了適應這種情況，Apple在硬件，軟件和iOS交互方面做了很多改變，而Safari的網(wǎng)站就是其中之一。

　在iPhone X上的網(wǎng)頁呈現(xiàn)

　　橫屏

在橫向模式下，iPhone X會顯示帶有白色條紋的網(wǎng)頁。盡管許多部件具有不同的顏色背景，但Apple的官方網(wǎng)站也由這些白線代表。

讓您的網(wǎng)頁更加與眾不同的唯一方法是為您的移動網(wǎng)頁設置合適的背景顏色——一種顏色，確保大多數(shù)配色方案與您的品牌/網(wǎng)站一致。

身體{

背景顏色: 676767;

}

但是，在同一頁面上具有不同背景顏色，漸變或圖案的部分仍將在兩側顯示所選的正文背景顏色。

　豎屏

當手機處于縱向（這也是人們最常用的方式）時，當窗口穿過所有邊緣時，兩側都沒有白線。

在縱向模式下，iPhone X將穿透整個屏幕。它被浸入使得窗戶可以無縫地穿過四邊的圓角。

此外，狀態(tài)和URL /導航欄會占用頁面的自定義背景顏色。

這類似于Android上的Chrome，它提供了主題顏色的元標記，占據(jù)了整個狀態(tài)欄中頁面的主要顏色。

垂直方向開辟了品牌色彩發(fā)展的新世界，進一步縮小了漸進式網(wǎng)絡應用與原生應用之間的差距。另一方面，Safari上的水平屏幕渲染有點與垂直相關。隨著時間的推移，看到它如何演變也很有趣。

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

圍繞新設計指南Groove Design，Apple強調iOS開發(fā)人員不會隱藏設備的圓角或在應用程序凹槽周圍添加黑色塊。

原作者：Krishna Murari

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

« Apple即將進入新總部：回顧Apple Park的過去和現(xiàn)在 | 復雜：借用區(qū)塊鏈我0預算3天球迷增長3次 »