iOS11中webview視口的示例分析

這篇文章主要介紹iOS11中webview視口的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問題，與客戶深入溝通，找到沈河網(wǎng)站設(shè)計(jì)與沈河網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋沈河地區(qū)。

iOS 11在狀態(tài)欄區(qū)域帶來了一些新的，也許是不直觀的行為，這對使用Apache Cordova或Ionic等工具的開發(fā)人員尤為重要。尤其是這種行為變化會(huì)影響到任何基于Web的應(yīng)用程序，這些應(yīng)用程序在進(jìn)行iOS 11構(gòu)建時(shí)使用fixed定位標(biāo)題欄。此文章可幫助您了解iOS 11中的Webview視口。

注意：現(xiàn)有應(yīng)用程序?qū)⒗^續(xù)工作，因?yàn)樗鼈兪冀K可以對其視口行為進(jìn)行更改。這只會(huì)影響使用Xcode 9和iOS 11的目標(biāo)編譯的應(yīng)用程序。

要了解這些變化，我們需要看看它的歷史。

狀態(tài)欄與安全區(qū)

在早起版本的iOS上，狀態(tài)欄只是一個(gè)固定屏幕上方的黑色條帶，并且是不可觸摸的。它屬于系統(tǒng)UI的一部分，你的app運(yùn)行在它的下方空間中。

隨著iOS7的推出，狀態(tài)欄變成了透明的，它的顏色取自應(yīng)用程序?qū)Ш綑诘念伾?。對于運(yùn)用在webview中的app比如Cordova，通常要判斷iOS的版本然后在固定的導(dǎo)航欄上方預(yù)留20px的邊距，以便正確的填充導(dǎo)航欄。

較新版的iOS對狀態(tài)欄引入了一些小的修訂版本，包括在打電話時(shí)狀態(tài)欄中顯示一個(gè)額外的橫幅，或者應(yīng)用程序在后臺使用定位功能的提示。

在native端，大部分這些兼容措施都被UINavigationBar以及自動(dòng)布局指南自動(dòng)解決掉了。屏幕頂部底部布局指南會(huì)自動(dòng)的判斷出當(dāng)前狀態(tài)欄的正確高度，確保app內(nèi)容區(qū)是『安全區(qū)』，狀態(tài)欄不會(huì)覆蓋到該區(qū)域。如果你根據(jù)頂部布局指南使用UINavigationBar，則iOS也會(huì)自動(dòng)將其顏色延伸到狀態(tài)欄后面。對于Web端來說，沒有這樣自動(dòng)化的解決方案。

iOS 11的改變

iOS 11與早起版本的不同在于，webview內(nèi)容區(qū)超出了安全區(qū)。這也就是說，如果你有一個(gè)頭部導(dǎo)航條使用fixed定位元素并且使用top: 0，那么它會(huì)在屏幕頂部20px的下方渲染：對齊到狀態(tài)欄的底部。

當(dāng)你向下滾動(dòng)時(shí)，它將向上移動(dòng)到狀態(tài)欄的下面。

當(dāng)你向上滾動(dòng)時(shí)，它將會(huì)重新跌落到狀態(tài)欄的下方（此時(shí)會(huì)留下一個(gè)尷尬的間隙，內(nèi)容會(huì)在這20px的間距內(nèi)展示）

蘋果為什么會(huì)這么做呢？

如果你看到了iphone X的設(shè)計(jì)圖，你就會(huì)有一個(gè)印象：iphone X未來有一個(gè)不規(guī)則的屏幕形狀，在屏幕頂部有一段『劉?！?，用來放置話筒與相機(jī)。如果fixed定位的元素定位到了真正的屏幕頂部，那該元素中間部分會(huì)被揚(yáng)聲器與相機(jī)覆蓋，從而無法訪問。

通過對齊到狀態(tài)欄的底部，可以確保標(biāo)題中的任何內(nèi)容都可以訪問。

除了現(xiàn)在的應(yīng)用程序有一個(gè)尷尬的標(biāo)題欄看起來很槽糕，隨著頁面上下移動(dòng)，標(biāo)題欄會(huì)被覆蓋到狀態(tài)欄的后面。

iOS 11 修復(fù)

幸運(yùn)的是，蘋果給我們一種方式來控制這種形式，通過meta標(biāo)簽。更幸運(yùn)的是，這種新的視口行為也適用于老的版本，包括棄用的UIWebView！

這個(gè)視口選項(xiàng)是：viewport-fit，它有三個(gè)可能的值：

• contain：視口完全包括網(wǎng)頁內(nèi)容，這意味著fixed定位的元素被包含在了iOS 11的安全區(qū)內(nèi)

• cover：網(wǎng)頁內(nèi)容完全覆蓋視口，這意味著fixed定位的元素將被固定到視口，即它們也可能會(huì)被覆蓋，這恢復(fù)了我們在ios 10上的行為

• auto：默認(rèn)值，和contain相同

所以要將你的標(biāo)題欄恢復(fù)到屏幕的頂部，就像在iOS 10中的狀態(tài)欄一樣，只需要添加viewport-fit=cover到meta中標(biāo)簽中既可。

iPhone X

但是，iPhone X的形狀不規(guī)則呢？狀態(tài)欄不在是20px高，并且相機(jī)與揚(yáng)聲器都向內(nèi)凸出，你的標(biāo)題欄內(nèi)容將會(huì)對用戶完全不可用。同樣需要注意的是，這也適用于固定在屏幕底部的頁腳條，它將會(huì)被麥克風(fēng)擋住。

注意：你的app只能使用iPhone的全屏幕空間，現(xiàn)有的應(yīng)用程序?qū)@示在頂部和底部的黑色空間的視圖框中。

幸運(yùn)的是，蘋果公司增加了一種方法來將安全區(qū)域布局指南暴露給CSS。他們添加了一個(gè)類似于CSS變量的概念，稱為CSS常量。想像這些像系統(tǒng)設(shè)置的CSS變量，不能被覆蓋。它們可以通過CSS中的constant()函數(shù)來訪問，該函數(shù)已被提交給CSS工作組進(jìn)行標(biāo)準(zhǔn)化。

四個(gè)布局指南常量是：

• constant(safe-area-inset-top)：來自視口頂部的安全區(qū)域插入量（以CSS像素為單位）

• constant(safe-area-inset-bottom)：從視口底部的安全區(qū)域插入量（以CSS像素為單位）。

• constant(safe-area-inset-left)：從視口左側(cè)的安全區(qū)域插入量（以CSS像素為單位）

• constant(safe-area-inset-right)：從視口右側(cè)的安全區(qū)域插入量（以CSS像素為單位）

蘋果給我們的最后的禮物是這些變量也被兼容到到UIWebView。

CSS常量示例

比如你有一個(gè)固定的頭部導(dǎo)航條，你在iOS 10的CSS就像這樣：

header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 44px;
 padding-top: 20px; /* Status bar height */
}

要是iPhone X或者iOS 11設(shè)備可以自動(dòng)調(diào)整，你可以將viewport-fit=cover添加到meta標(biāo)簽中，并在CSS中引入常量：

header {
 /* ... */
 /* Status bar height on iOS 10 */
 padding-top: 20px;
 
 /* Status bar height on iOS 11+ */
 padding-top: constant(safe-area-inset-top);
}

對于不理解constant()語法的舊設(shè)備使用后備值。你也可以在CSS calc()表達(dá)式中使用常量。

您還需要記住為底部導(dǎo)航欄執(zhí)行此操作。

以上是“iOS11中webview視口的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：iOS11中webview視口的示例分析
鏈接分享：http://bm7419.com/article24/jdijje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站排名、微信公眾號、微信小程序、做網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)