关于html：Android Webview Rem单元可将框的大小缩放

Android Webview rem units scale way to large for boxes

编辑：此错误是Webview覆盖默认的最小字体大小。
在我的示例中，Webview在某处将最小字体大小设置为8px。解决方案如下：

Android Webview的rem单位会放大。
所有rem单元在Android Webview中都显得太大了8倍，并且位置不合适。
唯一正常工作的rem标签是font-size：30rem；用于文本。其他一切
似乎是按比例放大的方式。即100rem = 800px @ 1.0px比例。
奇怪的是，在缩放时通过8.0px之后，该框开始放大。

此示例适用于除Webview之外支持rem单元的所有浏览器。
有人有主意吗？

>
</p>
<p>
在线示例：http://digitalknob.com/rem.html<br />
JSFiddle示例：https：//jsfiddle.net/aquawicket/71p49ag9/<br />
Android示例：http：//digitalknob.com/remTest.apk
</p>
<p>
我已经试过了mWebView.getSettings()。SetLoadWithOverviewMode(true);<br />
我已经试过了mWebView.getSettings()。SetUseWideViewPort(true);<br />
我试过<meta name = 和其他变体。
我尝试加载默认的用户样式表。

rem.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html style="font-size:1.0px;">
<head>
</head>
<body style="font-size:16em;">

<button style="position:absolute;width:100px;height:100px;font-size:60px;" onclick="ScaleDown()">-</button>
<button style="position:absolute;left:110px;width:100px;height:100px;font-size:60px;" onclick="ScaleUp()">+</button>
1.0px



Scale

var scale = window.devicePixelRatio;
Update_Scale();

function ScaleDown(){
scale -= 0.5;
Update_Scale();
}

function ScaleUp(){
scale += 0.5;
Update_Scale();
}

function Update_Scale(){
document.documentElement.style.fontSize = parseFloat(scale).toFixed(1)+"px";
document.getElementById("text").innerHTML = parseFloat(scale).toFixed(1)+"px";
}

</body>
</html>

AndroidManifest.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="digitalknob.remTest"
android:installLocation="auto"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:targetSdkVersion="19" android:minSdkVersion="19"></uses-sdk>
<uses-permission android:name="android.permission.INTERNET"/>
<application android:label="remTest"
android:icon="@mipmap/icon"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen">

<intent-filter>

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

WebviewActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

package digitalknob.remTest;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class WebviewActivity extends Activity {

private WebView mWebView;

@Override protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

mWebView=(WebView)findViewById(R.id.webview_webview);
mWebView.setWebContentsDebuggingEnabled(true); //Debuggable in Chrome
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.loadUrl("http://digitalknob.com/rem.html");
}

@Override public void onBackPressed(){
System.exit(0);
}
}

webview.xml

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<WebView
android:id="@+id/webview_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>

我发现设置以下webview设置可以解决此错误。

1 2	mWebView.getSettings().setMinimumFontSize(1); mWebView.getSettings().setMinimumLogicalFontSize(1);

setMinimumFontSize

这些设置实际上仅应用于实际的文本显示，而不是基于rem的定位/大小。这必须是一个android webview错误。