WKWebView: document.body.offsetHeight returns 高度错误，为什么？
WKWebView: document.body.offsetHeight returns wrong height, why?
我有这个代码：
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.readyState" completionHandler:^(id _Nullable complete, NSError * _Nullable error) {
if (complete != nil) {
[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable height, NSError * _Nullable error) {
lastWebViewHeight = [height doubleValue];
不幸的是这个 HTML 它 returns 701px:
<html><head><meta name="format-detection" content="telephone=no"></head><body bgcolor='#111111'> <table width="100%"> <thead style="border: thin solid #000000; color: #fcfcfc; font-size: x-small; text-align: center;"> <tr> <th rowspan="2" nowrap="nowrap"> FLIGHT NO. </th> <th rowspan="2"> DATE </th> <th rowspan="2"> FROM/TO </th> <th rowspan="2"> PIC </th> <th colspan="3" nowrap="nowrap"> FLIGHT TIME </th> <th colspan="3" nowrap="nowrap"> BLOCK TIME </th> <th rowspan="2"> TAKEOFF FUEL (KG) </th> <th rowspan="2"> LANDING FUEL (KG) </th> <th rowspan="2"> LDG </th> </tr> <tr> <th> T/O </th> <th> LNDG </th> <th> TOTAL </th> <th> OFF </th> <th> ON </th> <th> TOTAL </th> </tr> </thead> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size: x-small;" align="center"> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> BBD299 </td> <td nowrap="nowrap"> 22Dec18 06:30 </td> <td> EGPH/EBLG </td> <td> CLD </td> <td> 0640 </td> <td> 0753 </td> <td> 0113 </td> <td> 0625 </td> <td> 0756 </td> <td> 0131 </td> <td> 7400 </td> <td> 4400 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT010K </td> <td nowrap="nowrap"> 22Dec18 00:55 </td> <td> EGSS/EGPH </td> <td> ROH </td> <td> 0144 </td> <td> 0239 </td> <td> 0055 </td> <td> 0131 </td> <td> 0246 </td> <td> 0115 </td> <td> 7000 </td> <td> 4500 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT010J </td> <td nowrap="nowrap"> 21Dec18 22:25 </td> <td> EGPH/EGSS </td> <td> ROH </td> <td> 2236 </td> <td> 2335 </td> <td> 0059 </td> <td> 2222 </td> <td> 2358 </td> <td> 0136 </td> <td> 9700 </td> <td> 7200 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> 004N </td> <td nowrap="nowrap"> 21Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0225 </td> <td> 0307 </td> <td> 0042 </td> <td> 0210 </td> <td> 0314 </td> <td> 0104 </td> <td> 7050 </td> <td> 5070 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 20Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2343 </td> <td> 0028 </td> <td> 0045 </td> <td> 2333 </td> <td> 0032 </td> <td> 0059 </td> <td> 9000 </td> <td> 7250 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 20Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0134 </td> <td> 0213 </td> <td> 0039 </td> <td> 0120 </td> <td> 0219 </td> <td> 0059 </td> <td> 6700 </td> <td> 4900 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 19Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2341 </td> <td> 0026 </td> <td> 0045 </td> <td> 2330 </td> <td> 0030 </td> <td> 0100 </td> <td> 8800 </td> <td> 6900 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 19Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0133 </td> <td> 0212 </td> <td> 0039 </td> <td> 0120 </td> <td> 0218 </td> <td> 0058 </td> <td> 6540 </td> <td> 4700 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 18Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2347 </td> <td> 0034 </td> <td> 0047 </td> <td> 2335 </td> <td> 0039 </td> <td> 0104 </td> <td> 8800 </td> <td> 6740 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 18Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0222 </td> <td> 0302 </td> <td> 0040 </td> <td> 0210 </td> <td> 0308 </td> <td> 0058 </td> <td> 6800 </td> <td> 4940 </td> <td> 1 </td> </tr> </tbody> <tbody style="border: thin solid #000000; color: #fcfcfc; font-size:small;"> <tr> <td colspan="13"> <hr /> </td> </tr> <tr> <th colspan="4" style="color: Red;"> </th> <th colspan="2"> ACC. AIRBORNE TIME: </th> <th colspan="1" style="font-family: Arial; color: #HOURSOVERDUE#;"> N/A </th> <th colspan="2"> </th> <th colspan="1" style="font-family: Arial; color: #4380EF;"> </th> <th colspan="2"> ACC. LANDINGS: </th> <th colspan="1" style="font-family: Arial; color: #CYCLESOVERDUE#;"> N/A </th> </tr> </tbody> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size:small;" align="center"> <tr> <td colspan="14"> <hr /> </td> </tr> <tr> <td colspan="5" align="center"> SCHEDULED MAINTENANCE DUE AT: </td> <td align="right"> HOURS </td> <td> N/A </td> <td colspan="2" align="right"> DATE </td> <td nowrap="nowrap" style="color: #DATEOVERDUE#"> N/A </td> <td colspan="2" align="right"> LANDINGS </td> <td style="color: #LANDINGSOVERDUE#"> N/A </td> </tr> </tbody> </table> <table width="100%"> <thead style="border: thin solid #000000; color: #fcfcfc; font-size: x-small; text-align: center;"> <tr> <th colspan="14" align="Center"> <hr/> </th> </tr> <tr> <th colspan="14" align="Center"> <SPAN STYLE="font-size: 12pt">The following is from the maintenance system "Gannet", and is info only.</SPAN> </th> </tr> <tr> <th colspan="14"> </th> </tr> <tr> <th colspan="2"> STATUS </th> <th colspan="2"> WORK CARD NO. </th> <th colspan="4" align="left"> TITLE </th> <th colspan="3"> ITEM TYPE </th> <th colspan="3"> DUE DATE / LIMIT </th> </tr> </thead> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size: x-small;" align="center"> REPEAT2 <tr> <td colspan="2" style="color: #STATUS#"> [Status] </td> <td colspan="2"> [WorkcardNr] </td> <td colspan="4" align="left" > [Title] </td> <td colspan="3"> [ItemType] [MelItemNr] </td> <td colspan="3"> [DueDate] </td> </tr> REPEATEND2! <tr><td colspan="13"></td></tr> </tbody> </table></body></html>
虽然如果我在浏览器中呈现它，浏览器需要的更少 offsetHeight。您知道为什么会有所不同吗？
您需要添加元标记如下
<meta name=\"viewport\" content=\"initial-scale=1, user-scalable=no, width=device-width\" />
我有这个代码：
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.readyState" completionHandler:^(id _Nullable complete, NSError * _Nullable error) {
if (complete != nil) {
[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable height, NSError * _Nullable error) {
lastWebViewHeight = [height doubleValue];
不幸的是这个 HTML 它 returns 701px:
<html><head><meta name="format-detection" content="telephone=no"></head><body bgcolor='#111111'> <table width="100%"> <thead style="border: thin solid #000000; color: #fcfcfc; font-size: x-small; text-align: center;"> <tr> <th rowspan="2" nowrap="nowrap"> FLIGHT NO. </th> <th rowspan="2"> DATE </th> <th rowspan="2"> FROM/TO </th> <th rowspan="2"> PIC </th> <th colspan="3" nowrap="nowrap"> FLIGHT TIME </th> <th colspan="3" nowrap="nowrap"> BLOCK TIME </th> <th rowspan="2"> TAKEOFF FUEL (KG) </th> <th rowspan="2"> LANDING FUEL (KG) </th> <th rowspan="2"> LDG </th> </tr> <tr> <th> T/O </th> <th> LNDG </th> <th> TOTAL </th> <th> OFF </th> <th> ON </th> <th> TOTAL </th> </tr> </thead> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size: x-small;" align="center"> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> BBD299 </td> <td nowrap="nowrap"> 22Dec18 06:30 </td> <td> EGPH/EBLG </td> <td> CLD </td> <td> 0640 </td> <td> 0753 </td> <td> 0113 </td> <td> 0625 </td> <td> 0756 </td> <td> 0131 </td> <td> 7400 </td> <td> 4400 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT010K </td> <td nowrap="nowrap"> 22Dec18 00:55 </td> <td> EGSS/EGPH </td> <td> ROH </td> <td> 0144 </td> <td> 0239 </td> <td> 0055 </td> <td> 0131 </td> <td> 0246 </td> <td> 0115 </td> <td> 7000 </td> <td> 4500 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT010J </td> <td nowrap="nowrap"> 21Dec18 22:25 </td> <td> EGPH/EGSS </td> <td> ROH </td> <td> 2236 </td> <td> 2335 </td> <td> 0059 </td> <td> 2222 </td> <td> 2358 </td> <td> 0136 </td> <td> 9700 </td> <td> 7200 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> 004N </td> <td nowrap="nowrap"> 21Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0225 </td> <td> 0307 </td> <td> 0042 </td> <td> 0210 </td> <td> 0314 </td> <td> 0104 </td> <td> 7050 </td> <td> 5070 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 20Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2343 </td> <td> 0028 </td> <td> 0045 </td> <td> 2333 </td> <td> 0032 </td> <td> 0059 </td> <td> 9000 </td> <td> 7250 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 20Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0134 </td> <td> 0213 </td> <td> 0039 </td> <td> 0120 </td> <td> 0219 </td> <td> 0059 </td> <td> 6700 </td> <td> 4900 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 19Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2341 </td> <td> 0026 </td> <td> 0045 </td> <td> 2330 </td> <td> 0030 </td> <td> 0100 </td> <td> 8800 </td> <td> 6900 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 19Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0133 </td> <td> 0212 </td> <td> 0039 </td> <td> 0120 </td> <td> 0218 </td> <td> 0058 </td> <td> 6540 </td> <td> 4700 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 18Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2347 </td> <td> 0034 </td> <td> 0047 </td> <td> 2335 </td> <td> 0039 </td> <td> 0104 </td> <td> 8800 </td> <td> 6740 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 18Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0222 </td> <td> 0302 </td> <td> 0040 </td> <td> 0210 </td> <td> 0308 </td> <td> 0058 </td> <td> 6800 </td> <td> 4940 </td> <td> 1 </td> </tr> </tbody> <tbody style="border: thin solid #000000; color: #fcfcfc; font-size:small;"> <tr> <td colspan="13"> <hr /> </td> </tr> <tr> <th colspan="4" style="color: Red;"> </th> <th colspan="2"> ACC. AIRBORNE TIME: </th> <th colspan="1" style="font-family: Arial; color: #HOURSOVERDUE#;"> N/A </th> <th colspan="2"> </th> <th colspan="1" style="font-family: Arial; color: #4380EF;"> </th> <th colspan="2"> ACC. LANDINGS: </th> <th colspan="1" style="font-family: Arial; color: #CYCLESOVERDUE#;"> N/A </th> </tr> </tbody> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size:small;" align="center"> <tr> <td colspan="14"> <hr /> </td> </tr> <tr> <td colspan="5" align="center"> SCHEDULED MAINTENANCE DUE AT: </td> <td align="right"> HOURS </td> <td> N/A </td> <td colspan="2" align="right"> DATE </td> <td nowrap="nowrap" style="color: #DATEOVERDUE#"> N/A </td> <td colspan="2" align="right"> LANDINGS </td> <td style="color: #LANDINGSOVERDUE#"> N/A </td> </tr> </tbody> </table> <table width="100%"> <thead style="border: thin solid #000000; color: #fcfcfc; font-size: x-small; text-align: center;"> <tr> <th colspan="14" align="Center"> <hr/> </th> </tr> <tr> <th colspan="14" align="Center"> <SPAN STYLE="font-size: 12pt">The following is from the maintenance system "Gannet", and is info only.</SPAN> </th> </tr> <tr> <th colspan="14"> </th> </tr> <tr> <th colspan="2"> STATUS </th> <th colspan="2"> WORK CARD NO. </th> <th colspan="4" align="left"> TITLE </th> <th colspan="3"> ITEM TYPE </th> <th colspan="3"> DUE DATE / LIMIT </th> </tr> </thead> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size: x-small;" align="center"> REPEAT2 <tr> <td colspan="2" style="color: #STATUS#"> [Status] </td> <td colspan="2"> [WorkcardNr] </td> <td colspan="4" align="left" > [Title] </td> <td colspan="3"> [ItemType] [MelItemNr] </td> <td colspan="3"> [DueDate] </td> </tr> REPEATEND2! <tr><td colspan="13"></td></tr> </tbody> </table></body></html>
虽然如果我在浏览器中呈现它，浏览器需要的更少 offsetHeight。您知道为什么会有所不同吗？
您需要添加元标记如下
<meta name=\"viewport\" content=\"initial-scale=1, user-scalable=no, width=device-width\" />