熱搜:win11繞過硬件限制安裝 一鍵重裝Win10系統(tǒng) 最干凈的u盤啟動盤 真正純凈版的win7系統(tǒng)
編輯:xiaochun 2017-09-23 15:44:55 來源于:IT之家
蘋果發(fā)布的iPhone的十周年紀念產品iPhone X,蘋果稱其“智能手機的未來”。這也是蘋果首款全面屏手機,不過這個全面屏手機有一個尷尬的齊劉海設計,雖然里面的功能很強大,但是這個齊劉海對于屏幕的使用來說相當尷尬。
iPhone X一經發(fā)布,關于這段“劉海”的討論就沒有停止過。而更重要的是,這樣的設計讓大部分的應用程序都有點水土不服。蘋果此前已經向開發(fā)者公布了UI適配的注意事項,強調不能隱藏設備屏幕的圓角部分,同時也不許在頂部設置黑色欄隱藏傳感器遮蔽區(qū)域。
對于跟小編一樣的“強迫癥”來說,看到這樣的畫面,真的有點抓狂……
不過日前Safari網頁瀏覽器引擎WebKit的團隊在博客上詳細介紹了iPhone X的網頁優(yōu)化方法。簡單來說,就是將網頁內容移動到沒有“劉海”的那一側,屏幕頂部“劉海”兩側的區(qū)域不顯示網頁內容。
文檔中提到了在網頁的meta中使用viewport-fit=cover,這樣的話網頁不會拉伸至整個屏幕,讓顯示屏看起來很怪。
調整完viewport之后,就可以利用iPhone X安全區(qū)域進行網頁設計。在安全區(qū)域內,網頁內容不會受到劉海、圓角等問題的影響。
不過對于設計師來說,還是有點尷尬,好不容易實現的全面屏,這樣一來又相當于加上了無形的邊框,讓用戶的視覺體驗大打折扣。
▲最終優(yōu)化版
雖然優(yōu)化后的最終版本視覺效果要好上不少,但是依然有點崩潰……
豎屏對比效果:
▲優(yōu)化前
▲最終優(yōu)化效果
雖然這樣優(yōu)化iPhone X的齊劉海后確實是不影響使用了,但是之后的app應用又該怎么解決呢?
發(fā)表評論
共0條
評論就這些咯,讓大家也知道你的獨特見解
立即評論以上留言僅代表用戶個人觀點,不代表系統(tǒng)之家立場