【问题标题】:WebView does not render css like the browser does?WebView 不像浏览器那样渲染 css?
【发布时间】:2021-09-08 13:13:12
【问题描述】:

据我所知,WebView 与内置浏览器是一回事吗?正确的?

我面临一个问题,其中包含一些绝对定位的 div 元素的页面全部堆叠在彼此之上,而不是找到它们的正确位置,并且 background-image 被完全忽略。

这就是说,在我手机上的浏览器(HTC Incredible S - 2.3.3,股票浏览器)中正​​确呈现它,最重要的是,使用嵌入式 web 视图的应用程序我可以将其指向页面,正确渲染。这让我相信我在我的应用程序中拥有的 webview 正在以某种方式运行。

import android.app.Activity;
import android.content.Intent;
import android.graphics.Rect;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.*;

public class ShowWebView extends Activity {

    public WebView web;
    public String baseURL = "http://test.dev/";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webpage);

        web = (WebView) findViewById(R.id.webpage);
        home = (Button) findViewById(R.id.tool_Home);
        back = (ImageButton) findViewById(R.id.tool_Back);
        forward = (ImageButton) findViewById(R.id.tool_Forward);
        refresh = (ImageButton) findViewById(R.id.tool_Refresh);

        ajax = (ImageView) findViewById(R.id.test_anim);
        ajax.setBackgroundResource(R.drawable.ajax_animation);


        // Settings
        web.getSettings().setJavaScriptEnabled(true);
        web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
        web.setWebViewClient(new WebViewClient());

        Bundle extras = getIntent().getExtras();
        if(extras != null) {

            String url = baseURL+extras.getString("page")+"?androidApplication"; // The Basics, page gets added to baseURL
            String id = "";
            String push = "false"; // false by default

            // If an ID exists, lets get it
            if(extras.getString("id") != null) {
                id = extras.getString("id");
            }

            if(extras.getString("push") != null) {
                push = extras.getString("push");
            }

            // Build the URL
            if(id != "") url = url + "&id="+id;
            if(push != "false")     url = url + "&pushVersion";

            web.loadUrl(url);
        } else {
            web.loadUrl("http://www.bing.com");
        }
}

这也是我的 webview xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    style="@style/MainPage"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/Header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="match_parent"
            android:layout_height="42sp"
            android:scaleType="fitXY"
            android:src="@drawable/top_header" />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/SubHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="28sp"
            android:scaleType="fitXY"
            android:src="@drawable/top_sub_header" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >








        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:orientation="vertical" >

            <WebView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/webpage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                 />

        </LinearLayout>




        <LinearLayout
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:layout_marginTop="2.5sp"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/tool_Home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Home" />


            <ImageButton
                android:id="@+id/tool_Back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/backward" />


            <ImageButton
                android:id="@+id/tool_Forward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/forward" />


            <ImageButton
                android:id="@+id/tool_Refresh"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/refresh" />


            <ImageView
                android:id="@+id/test_anim"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_centerHorizontal="true" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

任何解决此问题的帮助都会非常棒!

【问题讨论】:

  • 我可以提出一些故障排除想法,以帮助获取更多信息。 1.)当您说它在手机的浏览器上正确呈现时,只是为了确保这部手机是您运行应用程序的同一个地方吗? CSS 支持在不同版本的 Android 中有所不同。 2.) 如果您删除所有视图并且布局中只有一个 WebView,它会改变什么吗? 3.)如果您在 WebView 中打开其他具有背景位置和绝对位置的网站(可能是带有 html/css 示例的网站)是否存在相同的问题,或者只是您的 html/css?
  • 感谢您的意见,因为它引导我走上正确的道路!我发现了发生了什么,请查看我上面的问题(在最顶部)以获得答案:)
  • 谢谢。帮了我很多。 setLayoutAlgorithm(LayoutAlgorithm.NORMAL) 对我有用。
  • 您应该将您发现的答案作为答案插入到下方(然后接受),而不是对您的问题进行编辑。

标签: android html css android-webview


【解决方案1】:

显然:

web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

导致 webview 吓坏了,因为它重新组织了 html 渲染器以将所有内容放在单个列中(或无论如何尝试)。禁用此行或使用 NORMAL 会导致渲染正常。

我只是使用这条线来禁用水平滚动。所以现在我有这个问题要再次处理。

【讨论】:

  • 尝试了一切,这终于对我有用。如果你遇到 CSS 问题,试试这个。谢谢!
  • 是的,这行修复了 CSS 渲染问题:web.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);,+1 回答
  • WebSettings.LayoutAlgorithm.NARROW_COLUMNS 实际上已弃用,请使用WebSettings.LayoutAlgorithm.NORMAL
猜你喜欢
  • 1970-01-01
  • 2010-10-24
  • 1970-01-01
  • 1970-01-01
  • 2011-08-02
  • 1970-01-01
  • 2013-10-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多