{dede:field.typename/}資訊

探知 • 創造美(měi)好

不斷超越客戶的(de)期望值，源自我們對(duì)這(zhè)個(gè)行業的(de)熱(rè)愛(ài)

主頁 > 新聞資訊>網站建設觀點>

查看其它闆塊

手機網站建設中iPhoneX兼容性問題解決方案

來(lái)源：網站建設觀點 - 遠(yuǎn)策科技 | 2019-06-05

在全面屏的(de) iPhone X 上，不需要而外的(de)代碼，Safari 可(kě)以很好的(de)展示現有的(de)網站。整個(gè)網站的(de)内容都會自動地展示在一個(gè)“安全區(qū)域”内，并不會被四周的(de)圓角或者“小劉海”遮擋住。
 
Safari 使用(yòng)頁面的(de)背景色（一般就是 <body> 或者 <html> 元素的(de) background-color）來(lái)填充周圍空出的(de)區(qū)域，與頁面的(de)其他(tā)部分(fēn)保持協調。這(zhè)種方式可(kě)以解決網站大(dà)部分(fēn)的(de)問題。
 
不過還(hái)有一些網站——尤其是那些有橫向貫穿的(de)導航條的(de)網站，像下(xià)面這(zhè)樣的(de)就需要做(zuò)一點額外的(de)工作，使得(de)在這(zhè)種新的(de)顯示下(xià)繼續利用(yòng)全面屏的(de)優勢，且不顯得(de)突兀。

手機網頁設計适配

我們需要有選擇地給那些包含重要信息的(de)元素加上内邊距，避免它們受到屏幕形狀的(de)影(yǐng)響。這(zhè)樣不但可(kě)以充分(fēn)利用(yòng) iPhone X 擴大(dà)的(de)屏幕，也(yě)可(kě)以避免手機四個(gè)角、小劉海和(hé)退到主屏标志的(de)影(yǐng)響。iOS 11 的(de) WebKit 引入了(le)一個(gè)新的(de) CSS 函數—— env()，還(hái)有四個(gè)預定義的(de)環境變量。—— safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, 和(hé) safe-area-inset-bottom。結合這(zhè)兩個(gè)新東西，就可(kě)以在樣式中使用(yòng)安全邊距。

蘋果浏覽器網頁兼容性

在不支持 env() 函數的(de)浏覽器中，這(zhè)條 CSS 規則會被忽略。因此，針對(duì)每個(gè)使用(yòng) env() 的(de)地方，加一條 CSS 備用(yòng)規則尤其重要。我們可(kě)以使用(yòng) Safari Technology Preview 新增的(de) CSS 函數 min() 或 max() 來(lái)實現。這(zhè)兩個(gè)函數都接受任意個(gè)數字，返回其中最小或者最大(dà)值。兩個(gè)函數都可(kě)以使用(yòng)在 calc() 中，也(yě)可(kě)以互相嵌套，也(yě)允許在函數内使用(yòng)計算(suàn)（就如 calc() 的(de)那樣）。

手機處于豎屏狀态時(shí)， env(safe-area-inset-left) 取值爲 0px，因此 max()函數的(de)取值爲 12px。橫屏時(shí)， env(safe-area-inset-left) 因爲小劉海的(de)存在，會比較大(dà)，max() 就會返回安全邊距，這(zhè)樣就可(kě)以保證重要的(de)内容總是可(kě)見。

返回首頁 了(le)解更多(duō)網站建設觀點

—— 微信添加好友交流 ——

快(kuài)捷标簽

上一條———————

網上商城(chéng)平台型網站建設所需的(de)資質備案有哪些

下(xià)一條———————

網站設計使用(yòng)對(duì)比度加強内容可(kě)讀性的(de)技巧

多(duō)一份參考，總有益處

131-1155-0088 / 159-3167-7513
在線咨詢 電話(huà)咨詢

遠(yuǎn)策科技

+

河北網高科技有限公司以工匠(jiàng)精神打造精緻服務，不循規蹈矩，不驚世駭俗，爲企業互聯網營銷整合方案，服務涵蓋： 網站建設、網站推廣、品牌優化(huà)、微信開發、VI設計、視頻(pín)制作等。解決企業互聯網營銷難題，讓企業不再爲推廣而煩惱。

遠(yuǎn)見卓識

10年網站建設推廣經驗

18家優秀合作設計機構

117家品牌長(cháng)期合作共赢

1000+網站建設案例作品

專注營銷型網站建設定制

深厚經驗網站建設團隊

完備的(de)項目流程管理(lǐ)體系

企業一站式網絡推廣服務

策無遺算(suàn)

+

一路走來(lái)，崇尚創意是我們的(de)活力和(hé)根源，讓客戶滿意是我們工作的(de)目标， 不斷超越客戶的(de)期望值源自我們對(duì)這(zhè)個(gè)行業的(de)熱(rè)愛(ài)！遠(yuǎn)策科技結合十年互聯網品牌設計經驗和(hé)整合營銷的(de)理(lǐ)念，将策略和(hé)執行緊密結合，有效提升企業推廣整體表現！

相關鏈接 展開
北(běi)京 天津 上海 重慶 黑(hēi)龍江 吉林(lín) 遼甯 河(hé)北(běi) 河(hé)南(nán) 山東 江蘇 山西 陝西 甘肅 四川 青海 湖南(nán) 湖北(běi) 江西 安徽 浙江 福建 廣東 廣西 貴州 雲南(nán) 海南(nán) 内蒙古 新疆 甯夏 西藏 香港 澳門 台灣

建站公司地址：石家莊市長(cháng)安嘉和(hé)廣場(chǎng)1911、裕華區(qū)ICC環球智慧中心24F | 業務咨詢：131-1155-0088 , 159-3167-7513

河(hé)北(běi)遠(yuǎn)策網絡公司爲您提供石家莊網站建設制作,網站優化(huà)推廣,網站改版托管等 | | |

電話(huà)咨詢 131-1155-0088 微信咨詢 微信開發 關于我們

遠(yuǎn)策 - 建站推廣一站式服務

您可(kě) 微信掃碼 或 撥打電話(huà) 咨詢
在線咨詢 稍後再說

131-1155-0088

微信掃碼 立即咨詢

遠(yuǎn)策科技 ✖