时间戳

首页 > 解决方案 > Webview 改变高度大小

java - Webview 改变高度大小

问题描述

我有一个内容为 html 的 webview，我希望 webview 的边框占据所有屏幕，如下图所示 在此处输入图像描述

这是我的代码：

webView.loadData(html, "text/html; charset=utf-8", "UTF-8")

webView.settings.loadWithOverviewMode = true
webView.settings.useWideViewPort = true

我的xml代码：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.emoonadev.mickael.gestioclientel.Activities.PreviewPDFActivity">

    <WebView
        android:id="@+id/app_web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

这是我的html：

    <!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>A simple, clean, and responsive HTML invoice template</title>

    <style>
                .invoice-box {
                    max-width: 800px;
                    margin: auto;
                    padding: 30px;
                    border: 1px solid #eee;
                    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
                    font-size: 16px;
                    line-height: 24px;
                    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
                    color: #555;
                }

            .invoice-box table {
                width: 100%;
                line-height: inherit;
                text-align: left;
            }

            .invoice-box table td {
                padding: 5px;
                vertical-align: top;
            }

            .invoice-box table tr td:nth-child(2) {
                text-align: right;
            }

            .invoice-box table tr.top table td {
                padding-bottom: 20px;
            }

            .invoice-box table tr.top table td.title {
                font-size: 45px;
                line-height: 45px;
                color: #333;
            }

            .invoice-box table tr.information table td {
                padding-bottom: 40px;
            }

            .invoice-box table tr.heading td {
                background: #eee;
                border-bottom: 1px solid #ddd;
                font-weight: bold;
            }

            .invoice-box table tr.details td {
                padding-bottom: 20px;
            }

            .invoice-box table tr.item td{
                border-bottom: 1px solid #eee;
            }

            .invoice-box table tr.item.last td {
                border-bottom: none;
            }

            .invoice-box table tr.total td:nth-child(2) {
                border-top: 2px solid #eee;
                font-weight: bold;
            }

            @media only screen and (max-width: 600px) {
                .invoice-box table tr.top table td {
                    width: 100%;
                    display: block;
                    text-align: center;
                }

                .invoice-box table tr.information table td {
                    width: 100%;
                    display: block;
                    text-align: center;
                }
            }

            /** RTL **/
            .rtl {
                direction: rtl;
                font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            }

            .rtl table {
                text-align: right;
            }

            .rtl table tr td:nth-child(2) {
                text-align: left;
            }

            #space{

            }


    </style>
</head>

<body>
<div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
        <tr class="top">
            <td colspan="6">
                <table>
                    <tr>
                        <td class="title">
                            <img src="#LOGO#" style="width:50%; max-width:300px;"/>
                        </td>


                        <td>
                            <strong><h2> #INVOICE_NUMBER# </h2></strong><br/>
                            Created: #INVOICE_DATE#
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td colspan="6">
                <table>
                    <tr>
                        <td>
                            #COMPANY_NAME#<br/>
                            #COMPANY_PHONE#<br/>
                            #COMPANY_ADDRESS#<br/>
                        </td>

                        <td>
                            #USER_NAME#<br/>
                            #USER_PHONE#<br/>
                            #USER_ADDRESS#<br/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="heading">
            <td>
                Item
            </td>

            <td>
                <center>Unit price HT</center>
            </td>

            <td>
                <center>Quantity</center>
            </td>

            <td>
                <center>HT</center>
            </td>

            <td>
                <center>VAT</center>
            </td>

            <td>
                <center>Price</center>
            </td>
        </tr>

        #ITEMS#

        <tr class="total">
            <td>
                <div id="space"><br/><br/><br/><br/></div>
                Total HT: #TOTAL_HT#<br/>
                VAT #VAT# %: #TOTAL_VAT#<br/>
                Discount: #DISCOUNT#<br/>
                Total TTC: #TOTAL_TTC#<br/>
                #TOTAL_AFTER_DISCOUNT#
            </td>
        </tr>
    </table>
</div>
</body>
</html>

谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢， 谢谢谢谢

标签： javaandroidhtmlwebview

解决方案

我很难确定您的代码的哪个方面与您希望在整个屏幕上显示的内容框相关联。

您需要识别代码并使用 CSS 属性高度。我认为 .invoice-box 是正确的类标识符，但我不能确定。

.invoice-box {
    height: 100%;
}

对内容框使用百分比将始终确保该框占据窗口高度的 100%。

希望这可以帮助。

推荐阅读