Android Webview rem单位缩放到大为box [英] Android Webview rem units scale way to large for boxes
问题描述
编辑：此错误是Webview覆盖默认的最小字体大小。
在我的示例中，Webview将最小字体大小设置为8px。解决方案如下：）
Android Webview rem单位缩放为大。
所有rem单位出现8倍太大，在Android Webview中的地方。
唯一能正常工作的rem标签是font-size：30rem;为文本。其他一切
似乎缩放到大。即100rem = 800px @ 1.0px scale。
Android Webview rem units scale way to large. All rem units appear 8 times too large and out of place in Android Webview. The only rem tag that works correctly is font-size:30rem; for text. Everything else seems to scale way to large. i.e. 100rem = 800px @ 1.0px scale. Strangely, after I pass 8.0px while scaling, the box starts to enlarge.
这个例子适用于除了WebView之外的所有支持rem的浏览器。
任何人都有想法？
This example works on every browser that supports rem units except Webview. Anyone have an idea?
在线示例： http://digitalknob.com/rem.html
JSFiddle示例：< a href =https://jsfiddle.net/aquawicket/71p49ag9/ =nofollow noreferrer> https://jsfiddle.net/aquawicket/71p49ag9/
Android示例： http://digitalknob.com/remTest.apk
Online Example: http://digitalknob.com/rem.html
JSFiddle Example: https://jsfiddle.net/aquawicket/71p49ag9/
Android Example: http://digitalknob.com/remTest.apk
我试过 mWebView.getSettings（）。setLoadWithOverviewMode（true）;
我试过了 mWebView.getSettings（）。setUseWideViewPort （true）;
我尝试过< meta name =viewportcontent =width = device-width，user-scalable = no/> 和其他变体。
我尝试加载默认用户样式表。 br>
I've tried mWebView.getSettings().setLoadWithOverviewMode(true);
I've tried mWebView.getSettings().setUseWideViewPort(true);
I've tried < meta name="viewport" content="width=device-width, user-scalable=no" /> and other variations.
I've tried loading a default user style sheet.
rem.html
<!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>
<a id="text" style="position:absolute;top:20px;left:220px;font-size:60px;">1.0px</a>
<!-- FIXME: rem units appear 8 times too large and out of place in Android Webview.
The only rem tag that works correctly is font-size:30rem;
This html file works as expexted on all other browsers. -->
<div style="position:absolute;top:115px;width:100rem;height:100rem;background-color:green;">
<a style="position:relative;top:30rem;left:16rem;font-size:30rem;">Scale</a>
</div>
<script>
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";
}
</script>
</body>
</html>
AndroidManifest.xml
<?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">
<activity android:name="digitalknob.remTest.WebviewActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
WebviewActivity.java
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);
}
}
.xml
<?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设置将作为此错误的解决方法。
I found that setting the following webview settings will act as a workaround for this bug.
mWebView.getSettings().setMinimumFontSize(1);
mWebView.getSettings().setMinimumLogicalFontSize(1);
这些设置实际上只应用于实际文本显示，基于位置/大小。此 必须是Android的webview错误。
These settings really should only be honored for actual text display, not rem based positioning/sizing. This must but an android webview bug.
这篇关于Android Webview rem单位缩放到大为box的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
