Question

我在Android上移植了一个IOS应用程序，我发现本地html文件存在一个奇怪的问题。我有四个html页面在IOS上完美运行，显示了一个简单的“如何”。我使用以下代码在webview中加载这些页面：

myWebView = (WebView) findViewById(R.id.webview1);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setLoadWithOverviewMode(true);
myWebView.getSettings().setUseWideViewPort(true);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
myWebView.loadUrl("file:///android_asset/www/localizeInfo.html");

主div正确显示但内部内容显示为切割，就像有一个垂直列切割文本一样。这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Guida Blocco/Sblocco Avviamento</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="main">
    <p class="title"><img src="img/myhappysat.png" class="icon" />Blocco/Sblocco Avviamento</p>
    <hr>
    <p>Per utilizzare la funzione di blocco/sblocco avviamento &egrave; necessario selezionare uno o pi&ugrave; mezzi.</p>
    <p>Successivamente premere il pulsante relativo alla funzione desiderata ed infine confermare con il pulsante invia in alto a sinistra.</p>
    <p><b>Legenda</b></p>
    <p><img src="img/green.png" class="color" />Il blocco avviamento del veicolo risulta Sbloccato</p>
    <p><img src="img/yellow.png" class="color" />Non ci sono informazioni sullo stato del blocco avviamento del veicolo</p>
    <p><img src="img/red.png" class="color" />Il blocco avviamento del veicolo risulta Bloccato</p>
    <p><b>NOTA:</b> Gli stati vengono rilevati direttamente dal server e quindi non sono aggiornati in tempo reale ed &egrave; necessaria una connessione ad Internet attiva. I dispositivi risponderanno solo ai numeri autorizzati e tutte le funzionalit&agrave; sono vincolate dalla copertura della rete GSM.</p>
</div>
</body>

这里的CSS：

body {
    background-color:gray;
}

div#main{
top:2px;
bottom:10px;
right:10px;
left:10px;
position:absolute;
background:#e7e2e2;
display:block;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 2px 2px #666 inset;
-moz-box-shadow: 1px 1px 2px 2px #666 inset; 
-webkit-box-shadow: 1px 1px 2px 2px #666 inset;
-khtml-box-shadow: 1px 1px 2px 2px #666 inset;
}

img.color {
margin-right:15px;
vertical-align:middle;
}

img.icon {
margin-top:5px;
margin-right:15px;
margin-leftt:5px;
vertical-align:middle;
}

p {
text-align: justify;
font: 30px/1.5 Arial, "Arial", sans-serif;
margin-right:10px;
margin-left:10px;    
}

p.title {
font-weight: bold;
margin-left:10px;
display: inline;
}

这是布局问题的屏幕截图： https://www.dropbox.com/sh/gbdjm45vj4mw92x/1IF5LOo_fJ/ScreenShotHTMLIssue.png

Answer 1

这可能是因为NARROW_COLUMNS布局算法正在进行中？尝试setting it到NORMAL。

奇怪的问题Android布局与webview中的html文件

1 个答案: