強迫症果粉注意了 購買iphone X之前先看看能接受劉海的體驗嗎？

關於蘋果在iphone X上採用異形全面屏的做法，網間一直都褒貶不一，特別是在iphone X正式發布後，就有媒體曝出了使用該機觀看視頻的截圖，很明顯這塊突出的「大劉海兒」在觀看視頻的時候，體驗確實有些讓人抓狂。而近日，Safari網頁團隊公布了一組iPhone X瀏覽網頁的視覺效果圖，更是讓iPhone X的整體顯示效果割裂感十足。

日前Safari網頁瀏覽器引擎WebKit的團隊在博客上詳細介紹了iPhone X的網頁優化方法，雖然此次公布的消息，旨在告訴開發者如何來更好的優化自己的網站，從而在這個新iPhone上完美展示，但是其發布的效果圖，著實讓不少網友犯了「強迫症」。其實，簡單來說，Safari網頁團隊就是想要開發者將網頁內容移動到沒有「劉海」的那一側，屏幕頂部「劉海」兩側的區域不顯示網頁內容。而此前，蘋果已經向開發者公布了UI適配的注意事項，強調不能隱藏設備屏幕的圓角部分，同時也不許在頂部設置黑色欄隱藏感測器遮蔽區域。

從Safari網頁團隊公布的文檔看，其在網頁的meta中使用viewport-fit=cover，這樣的話網頁不會拉伸至整個屏幕，但是，從顯示效果看，卻似乎顯得更加奇怪了。

而從調整完viewport之後的效果看，調整以後就可以利用iPhone X安全區域進行網頁設計。在安全區域內，網頁內容不會受到劉海、圓角等問題的影響。但是這樣看來，iphone X的有效現實區域似乎要變小不少。而對於OLED屏來說，對於經常看視頻或瀏覽網頁的小夥伴，是否會讓手機屏出現燒屏的情況，就不好說了。

而對於設計師來說，本來根據屏幕尺寸比例很容易實現的全屏現實，在iphone上很可能將增加一套適配方案，也就是說，除了對於標準屏的iphone適配全屏現實外，還要針對iphone X再做一套適配方案，需要為iphone X上顯示的全屏效果外加上無形的邊框，可以不讓其滿屏，這樣恐怕會讓用戶的視覺體驗大打折扣。

最終優化版

雖然根據方案中優化後的最終版本視覺效果確實要好一些，不過小編總還是感覺有些礙眼。其實，蘋果此次對於「劉海兒」給出的方案看起來並不完美，給人的感覺就是讓開發者故意躲避這個劉海兒，因為整體方法就是讓你的網頁內容避開這個劉海區域，對於全面屏設計的iPhone X來說，這個方案讓人接受起來真的太抓狂。

豎屏對比效果：

優化前

最終優化效果

而據悉，除了此次Safari網頁團隊公布的網頁解決方案外，蘋果此前就已經敦促所有的開發者，在應用中兼容並美化iPhone X的前劉海，但是，根據實際適配工作量看，或許對於網頁的適配的工作量還不算是太麻煩，而對於視頻APP應用來說，恐怕要準備多套屏幕適配方案，工作量將會是巨大的，不過目前看，蘋果方面似乎也沒有太好的解決，暫時也就是能採用這個避開「劉海兒」區域的方案了。

由此，也可以看出，根據目前全面屏的設計方案來看，以小米MIX、三星S8、vivo X20等為代表的陣營，貌似更為成熟穩定，至少不會以犧牲用戶的使用體驗，來換取所謂的全面屏顯示效果，同時還能帶來更好顯示效果，並且也不會加大開發者的適配工作量，不會因為適配而增加開發者的成本。所以，雖然目前傳聞稱，iphone X有可能延遲量產，甚至延遲上市開售，但是無論該機是否會延遲，小編想要提醒有「強迫症」的小夥伴，也許未來蘋果會對「劉海兒」提出更好的解決方案，但是前期，恐怕還是會讓人抓狂的!

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！