Question

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

Android Webview Rem单位缩放方式大。所有rem单位在Android Webview中显示的次数太大且不合适。唯一正常工作的rem标签是font-size：30rem;对于文本。其他一切似乎扩大规模。即100rem = 800px @ 1.0px比例。奇怪的是，在缩放后传递8.0px后，框开始放大。

此示例适用于支持除Webview之外的rem单元的每个浏览器。有人有想法吗？

在线示例：http://digitalknob.com/rem.html
JSFiddle示例：https://jsfiddle.net/aquawicket/71p49ag9/
Android示例：http://digitalknob.com/remTest.apk

我试过 mWebView.getSettings（）。setLoadWithOverviewMode（true）;
我试过 mWebView.getSettings（）。setUseWideViewPort（true）;
我试过＆lt; meta name =“viewport”content =“width = device-width，user-scalable = no”/＆gt; 和其他变体。
我已经尝试加载默认的用户样式表。

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);
    }
}

的 webview.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>

Answer 1

我发现设置以下webview设置将作为此错误的解决方法。

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

setMinimumFontSize

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

Android Webview rem单位可以扩展到大框

1 个答案: