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