草庐IT

Android Webview rem 单位可缩放到盒子的大尺寸

coder 2023-12-19 原文

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

Android Webview rem 单位缩放到很大。 所有 rem 单位在 Android Webview 中都显得过大 8 倍并且不合适。 唯一正确工作的 rem 标签是 font-size:30rem;为文本。其他一切 似乎规模很大。即 100rem = 800px @ 1.0px 比例。 奇怪的是,当我缩放超过 8.0px 后,框开始变大。

此示例适用于除 Webview 之外的所有支持 rem 单位的浏览器。 有人有想法吗?

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

我试过mWebView.getSettings().setLoadWithOverviewMode(true);
我试过 mWebView.getSettings().setUseWideViewPort(true);
我已经尝试过<meta name="viewport"content="width=device-width, user-scalable=no"/> 和其他变体。
我已尝试加载默认用户样式表。

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>

最佳答案

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

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

setMinimumFontSize

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

关于Android Webview rem 单位可缩放到盒子的大尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41179357/

有关Android Webview rem 单位可缩放到盒子的大尺寸的更多相关文章

  1. ruby - 以毫秒为单位获取当前系统时间 - 2

    在Ruby中,以毫秒为单位获取自纪元(1970)以来的当前系统时间的正确方法是什么?我试过了Time.now.to_i,好像不是我想要的结果。我需要结果显示毫秒并且使用long类型,而不是float或double。 最佳答案 (Time.now.to_f*1000).to_iTime.now.to_f显示包含十进制数字的时间。要获得毫秒数,只需将时间乘以1000。 关于ruby-以毫秒为单位获取当前系统时间,我们在StackOverflow上找到一个类似的问题:

  2. ruby - 类的大小(以字节为单位) - 2

    有没有一种方法可以查看ruby​​中为类分配的内存大小?我构建了一个自定义类,我想知道它在内存中的大小。那么C语言中有没有类似sizeof()的函数呢?我只是想像这样初始化一个新类test=MyClass.new并试图找到一种方法来打印出已分配给内存的类的大小。这在ruby​​中甚至可能吗? 最佳答案 没有以与C相同的方式计算类大小的语言功能。对象的内存大小取决于实现。这取决于基类对象的实现。估计使用的内存也不简单。例如,如果字符串很短,则可以嵌入到RString结构中,但如果它们很长(NevercreateRubystringsl

  3. ruby-on-rails - 在服务器端检测屏幕尺寸和像素密度? - 2

    我一直在做一些研究,我想我已经知道答案了,但我想知道是否有任何方法可以在不使用javascript或依赖CSS3媒体的情况下获得设备的屏幕尺寸和像素密度查询。本质上,我正在研究如何获取屏幕分辨率和像素密度,以便服务器可以决定在URI请求中为服务器提供哪个图像。到目前为止,我还没有发现任何证据表明这是可能的,但我想嘿,为什么不问问呢? 最佳答案 我不完全同意上面的正确答案。实际上,这个答案在很多情况下都是正确的……但理论上并非如此。通常向Web服务器发出的请求包含一个User-Agent字段,从理论上讲,该字段可用于识别有关设备屏幕分

  4. ruby - 如何从 Sass 混合方程中删除测量单位? - 2

    我编写了一个非常简单的Sassmixin,用于将像素值转换为rem值(请参阅JonathanSnook的articleonthebenefitsofusingrems)。这是代码://MixinCode$base_font_size:10;//10px@mixinrem($key,$px){#{$key}:#{$px}px;#{$key}:#{$px/$base_font_size}rem;}//Includesyntaxp{@includerem(font-size,14);}//RenderedCSSp{font-size:14px;font-size:1.4rem;}这个mixi

  5. ruby - Ruby 中的大指数? - 2

    我只是在做一些与大学相关的Diffie-Hellman练习,并尝试使用ruby​​。遗憾的是,ruby似乎无法处理大指数:warning:ina**b,bmaybetoobigNaN[...]有什么办法吗?(例如,特殊的数学课或类似的东西?)附注这是有问题的代码:generator=7789prime=1017473alice_secret=415492bob_secret=725193putsfrom_alice_to_bob=(generator**alice_secret)%primeputsfrom_bob_to_alice=(generator**bob_secret)%pr

  6. ruby - 对服装尺寸的 Ruby 数组进行排序 - 2

    给定以下ruby​​数组:["2XL","3XL","4XL","5XL","6XL","L","M","S","XL"]如何对其进行排序以使其符合此顺序?["S","M","L","XL","2XL","3XL","4XL","5XL","6XL"]请注意,每种尺寸并不总是存在。为了历史的缘故,这是我最初的实现。sorted_sizes=[]sorted_sizes 最佳答案 ["S","M","L","XL","2XL","3XL","4XL","5XL","6XL"]&["2XL","3XL","4XL","5XL","6XL

  7. ruby - Prawn :有没有办法让一个盒子里的所有内容垂直对齐? - 2

    我正在尝试将一些内容垂直居中放置在bounding_box中。对于单个文本,这没问题:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"verticallyalignedinthesurroundingbox",:valign=>:centerend但是如果我的边界框中有多个元素,我该怎么办:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"vertic

  8. 字符串中的 Ruby 日期时间转换为以毫秒为单位的日期时间 - 2

    这是一个Ruby问题(1.9.1)我在字符串中有以下日期和时间:29Sep201312:25:00.367我首先想将它从字符串转换为日期和时间,然后添加10秒并将其转换回与以上。我写了这段代码:format="%d%b%Y%H:%M:%S"date_time="29Sep201322:11:30.195"parsed_time=DateTime.strptime(date_time,format)puts"newdatetimeis#{parsed_time}"哪些输出:newdatetimeis2013-09-29T22:11:30+00:00我没有看到“195”。我尝试了forma

  9. ruby - 用于在 Ruby 中转换物理单位(千克、磅)的库? - 2

    我知道Rails有一些用于日期和时间管理的好helper。是否有一个已经在运行的项目包含或合并了用于标准单位及其转换的干净的DSL?任何具有在两个系统的基本长度和重量单位之间进行转换的助手的项目都可以工作。谢谢! 最佳答案 哇,比我想象的要多很多。这是我认为的完整列表,按字母顺序排列,示例用法从他们的文档中删除。我还注意到我是否无法让它们在本地运行。Alchemistrequire'alchemist'Alchemist.setup8.miles.to.meters10.kilometers+1.mile#11.609344kilo

  10. ruby-on-rails - Rails 以月为单位计算日期范围 - 2

    如何计算两个日期的月差?此外,如果它有所作为,我正在使用Date对象,而不是DateTime。此外,一些舍入选项可能会很好,这样我就可以控制是否要对部分月份进行向上或向下舍入。谢谢! 最佳答案 从一个Date或DateTime中减去另一个Date或DateTime将得到天数的分数,但这可以根据需要评估为Float或Fixnum。例如:(Date.today-Date.today.advance(:months=>-3)).to_f#=>89.0今天与三个月前的同一日历日期之间相隔89.0天。如果您使用30天的月份或平均30.4375

随机推荐