以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，Mockplus是更快更簡單的原型設(shè)計(jì)工具。?

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

頂部的黑色凹槽采用了許多最先進(jìn)的技術(shù)：紅外攝像頭、環(huán)境感應(yīng)器、光感傳感器等——所有這些都是用來支持面部識(shí)別的。

iPhone X?的頂部凹槽

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

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

橫屏

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

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

body {

background-color:#676767;

}

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

豎屏

當(dāng)手機(jī)在豎屏?xí)r(這也是人們最常用的方式)，當(dāng)視窗貫穿所有的邊緣時(shí)，兩邊都沒有白色線條。

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

此外，狀態(tài)和URL /導(dǎo)航條會(huì)占用網(wǎng)頁的自定義背景顏色。

這類似于Android上的Chrome，呈現(xiàn)主題顏色的元標(biāo)簽，在整個(gè)狀態(tài)欄中占據(jù)網(wǎng)頁的主色。

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

縱向方向打開了推動(dòng)品牌顏色發(fā)展的新天地，并且進(jìn)一步的縮小了漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序和本地應(yīng)用程序之間的差距。另一方面，Safari上的橫屏網(wǎng)頁呈現(xiàn)與縱向有些關(guān)聯(lián)。隨著時(shí)間的推移，我們看看它是如何演變的也是一件有趣的事。

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

圍繞新的設(shè)計(jì)指南-凹槽設(shè)計(jì)，蘋果公司強(qiáng)調(diào)iOS開發(fā)人員不會(huì)隱藏設(shè)備的圓角，或者在他們的應(yīng)用程序凹槽周圍添加黑塊。

?

原文作者：Krishna Murari?

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

?Mockplus做原型，更快更簡單，現(xiàn)在下載Mockplus，免費(fèi)體驗(yàn)暢快的原型設(shè)計(jì)之旅。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。