2. 程式人生 > >WkwebView調節字型大小獲取高度

WkwebView調節字型大小獲取高度

阿新 • • 發佈：2019-01-21

一般新聞閱讀類APP都有一個功能是調節字型大小，而這類新聞介面一般是由webVIew來實現的，實際上就是怎麼實時調節webView的字型大小。

寫在前面

前後實驗過大概有三四種方法，各有各自的優缺點，記錄如下，不確保普遍適用，歡迎交流指正。

調節字型大小

<style type=\"text/css\"> 
    *{
    font-size:18.0px !important;
    background: #ffff32 !important;
    padding-right: 0px !important;
    padding-left: 0px !important
 
;
    line-height: 1.7em !important
    p{
    margin-top:-5px !important;
    }
    body{
    text-align:1.2px; 
    color: #4A4A4A;
    }
</style>

只需要改變font-size:18.0px這個值，然後把html字串重新注入WkWebView。

追加定位標籤

在要顯示的html文字的最後面追加一個定位空標籤。

<body>
    . . . 
    <!-- HTML結構 -->
    <div
 
 id="test-div">
    </div>
</body>

這個test-div標籤不顯示任何內容，它的作用就是作為一個錨點，我們通過獲取這個錨點在webView的位置，確定webView的高度。

在webView載入完畢後執行JavaScript獲取指定標籤的位置

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.getElementById(\"test-div\").offsetTop"
 
 completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        CGFloat height = [result doubleValue];
        NSLog(@"scrollHeight = %f", height);
        [self.webView mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(height);
        }];
    }];
}

實際運用發現這種方法獲取的高度還是蠻準確的，目前專案中採用的是這種方法。不管是字型從大調到小，還是從小調到大，都能獲取到準確的高度。

offsetHeight/scrollHeight

相信這個方法大家都用過

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

    [webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        CGFloat height = [result doubleValue];
        NSLog(@"offsetHeight = %f", height);
    }];
}

這種方法有個明顯缺陷是，字型從小調到大時，OK，獲取的高度沒問題；但是你從大調到小時發現獲取的高度幾乎沒有任何改變，這時候再拿來用會導致底部大片留白。
換成document.body.offsetHeight結果也是一毛一樣的。
後來瞭解到這種現象是：
字型從小到大時webView容器不夠完全顯示會重新排版，並更新自己的容器，此時我們拿到的高度都是準確的，但是當字型從大調到小時，webView容器足夠完全顯示所有內容，認為沒必要去更新容器，導致我們獲取的高度是之前的高度。

為了驗證上面說法，我在每次html字串重新注入之前將webView的高度置0，這時不管怎麼調拿到的高度都是準確的，但是有個一閃的效果。。。

webkitTextSizeAdjust= ‘100%’”

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

    //修改字型大小
    [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '100%'" completionHandler:^(id _Nullable result, NSError * _Nullable error) {

    }];
}

這種方法也能修改字型大小，同樣的，拿到的高度跟上面時一樣的，從大到小底部會有大片留白

總結

比較以上幾種方法，第一種方法效果還是不錯的，但是總感覺追加一個定位標籤可能會有什麼隱患，還好目前沒有?

相關推薦

WkwebView調節字型大小獲取高度

一般新聞閱讀類APP都有一個功能是調節字型大小，而這類新聞介面一般是由webVIew來實現的，實際上就是怎麼實時調節webView的字型大小。 寫在前面 前後實驗過大概有三四種方法，各有各自的優缺點，記錄如下，不確保普遍適用，歡迎交流指正。 調

ng4+ts設定 localStorage 實現可調節字型大小

less：         .navbar-font {             display: flex; // position: relative;             // left: 330px;             margin: auto;    

JS獲取瀏覽器視窗大小 獲取螢幕，瀏覽器，網頁高度寬度（轉載）

網頁可見區域寬：document.body.clientWidth 網頁可見區域高：document.body.clientHeight 網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 網頁可見區域高：document

Android禁止app字型大小跟隨系統字型大小調節

Android禁止app字型大小跟隨系統字型大小調節 針對字型不隨系統應用改變而改變,不然會導致原來的一些佈局變化,在Application中重寫getResources() @Override public Resources getResourc

VS2015控制檯中獲取和修改當前字型大小（2-2）

2.2 GetConsoleFontSize()函式 GetConsoleFontSize()函式的作用是獲取指定控制檯輸出視窗字型的尺寸。 2.2.1 函式介紹 GetConsoleFontSize()函式的格式為 COORD WINAPI GetConsoleFontSize

字型大小，行高，高度

ie6下，font-size  等於 line-height 時，字型受行高限制，顯示不全。 如圖： 所以應該將行高設定為大於字型值2px，切記不要這樣寫font：12px/12px，要12px/14px ////////////////////////////////

iOS WKWebView如何載入Html程式碼? WKWebView如何修改字型大小和顏色?

1.載入Html程式碼使用：NSString *htmlString = @“ <p> \U770b\U89c1\U5c31\U4e0a\Uff0c\U4e0d\U8981\U6002&l

iOS11 WKWebview獲取高度不準確問題

遇見這個問題的時候，我發現偏離了大概64畫素，由此聯想到了tableView和collectionView。 故解決辦法如下： if (@available(iOS 11.0, *)) { _webView.scrollView.contentInsetAdjustm

eclipse使用手冊：字型大小調節

說是原創，其實都是網上找的攻略，自己記錄下來罷了。 對於eclipse的字型，沒有一般txt或者網頁等用ctrl和滑鼠滾輪來調節那麼簡單了，下面是調節字型大小的步驟 1、軟體上方找到window之後

UIWebView和WKWebView 改變HTML 圖片尺寸 及 字型大小

今天晚上用WebKit 載入 HTML 的時候，發現傳過來的 圖片 尺寸不是很美麗， 於是乎 就想著，在載入完成之後，通過JS修改HTML中的圖片尺寸，琢磨了半天，謝了一段js，成功了，可能存在一小點

動態調整UITableViewCell的高度及字型大小設定

1 建立並新增一個UILabel作為單元格cell的子檢視； 2 在UITableView的委託方法: (CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath: (NSIndexPat

安卓程式碼中獲取dimen設定字型大小setTextSize，會變得比dimen的值還大——解決方法

holder.tvMsgContent.setTextSize(mContext.getResources().getDimensionPixelOffset(R.dimen.message_content_font));<dimen name="message_content_font">32p

獲取高度

idt 16px 滾動條 log 分辨率 turn -s firefox 可見 1、獲取窗口滾動條高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&

android調節聲音大小

狀態 不變 android 背景 sound tab ext 鈴聲 comment android調節聲音大小 1.背景音樂的一些知識 網上好多關於背景音樂添加用到的類： MediaPlayer，SoundPool，AudioManager的資料，可是有時候解決不了我們

110.文件搜索,系統大小獲取,以及病毒行為

以及 pac copy span style emd pau 獲取系統路徑 行為 拷貝文件 1 //拷貝文件 2 void copy() 3 { 4 //自身路徑 5 char selfpath[256] = { 0 }; 6 //W

小白python學習——matplotlib篇——繪製簡單點和直線、顏色，字型大小改變

1.直線： import matplotlib.pyplot as plt input_values=[1,2,3,4,5] squares = [1,4,9,16,25] #設定圖表標題，並給座標軸加上標籤 plt.plot(input_values,squares,linewidth=5)

TabLayout選中更改標籤字型大小及顏色

由於最近要使用TabLayout載入頂部導航欄，但是產品需求是將我們選中的標籤變大~~馬磊皮，老老實實的不好麼~ ，沒辦法，該做還是得做，上網找了一下，發現TabLayout中除了XML中可以設定字型大小之外，其他沒有啥API能更改 字型大小，， 這個是在XML中設定字型大小，但是我們

Qt的pointSize和pixelSize，qt字型大小自適應

實驗證明： 使用QFont的setPointSize，此時字型的大小會跟隨DPI改變而改變。 使用QFont的setPixelSize，此時字型的大小不會隨DPI的改變而發生變化。 通過設定PointSize的字型來說，字型大小是隨著螢幕大小以及解析度自適應的，因此無須處理字型的縮放

Android系統的桌面圖示文字——調整字型大小、圖示和文字間的間隔

一、適當縮小應用圖示名稱的字型大小，請參考我寫的“Launcher3佈局的佈局配置 ”，先確認裝置使用的哪一個profile標籤，然後適當縮小對應的launcher:iconTextSize 二、圖示和文字間的間隔 1、路徑：packages\apps\Launcher3\src\co\

谷歌瀏覽器移動端部分字型大小與設定大小不同

問題描述：為了適配各種移動端裝置，動態設定了viewport縮放，然後動態設定html的font-size大小，用rem佈局。但是在谷歌瀏覽器中檢視的時候出現了問題 1.這個沒問題，font-size設定的.28rem，所以換算成px應該是.28*100=28px；OK，沒毛病，但是下面那行