WebView 中边框的大小呈现不同

Question

我有一个正在使用 WebView 查看的移动网页，但由于某种原因，它以不同的方式呈现边框 - 1px 或 2px 厚。有人经历过吗？

所以下面的示例图片显示了一个具有 1px 顶部和 1px 底部边框的 div 是如何以 1px 顶部和 2px 底部呈现的。其他地方也出现这个问题，让设计看起来很廉价……

有什么建议吗？

一些代码

活动

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends Activity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
        deleteDatabase("webview.db");
        deleteDatabase("webviewCache.db");
        WebView mywebview = (WebView) findViewById(R.id.webview);

         mywebview.loadUrl("http://example.mobi/");
         WebSettings webSettings = mywebview.getSettings();
         webSettings.setJavaScriptEnabled(true);
         //webSettings.setBuiltInZoomControls(true);
         mywebview.setWebViewClient(new WebViewClient());

    }

}

XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >

    <WebView android:id="@+id/webview" 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent"
         />

</RelativeLayout>

HTML

...
 <meta name="viewport" content="target-densitydpi=device-dpi; width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1; user-scalable=0;">
<div id="mobilesStatusSubmit">
   post status
</div>
....

CSS

div#mobilesStatusSubmit{
width: 100%;
height: 30px;
padding-top:10px;
font-size: 16px;
font-weight: bold;
color: #2684b0;
text-align: center;
background: white;
display: block;
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;

}

电话

银河 S2

Answer 1

我已经找到了解决这个问题的方法，并且在下面的教程中有很好的解释。

显然屏幕密度会影响边框，因为我的 Galaxy S2 的像素密度约为 1.5 像素，因此在某些边框中 1px 变为 2（可能有一半时间）

https://web.archive.org/web/20120703185504/http://bradbirdsall.com/mobile-web-in-high-resolution

希望这对其他人有所帮助。

Answer 2

你试过了吗……

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends Activity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
        deleteDatabase("webview.db");
        deleteDatabase("webviewCache.db");
        WebView mywebview = (WebView) findViewById(R.id.webview);
       mywebview .setKeepScreenOn(true);
            mywebview .getSettings().setJavaScriptEnabled(true);
             mywebview .getSettings().setDomStorageEnabled(true);
             mywebview .getSettings().setBuiltInZoomControls(true);
             mywebview .setInitialScale(100);
            mywebview .getSettings().setUseWideViewPort(true);
             mywebview .setWebViewClient(new MyWebViewClient());
              mywebview .setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
            mywebview.loadUrl("http://example.mobi/");
           WebSettings webSettings = mywebview.getSettings();
           webSettings.setJavaScriptEnabled(true);
         //webSettings.setBuiltInZoomControls(true);
         mywebview.setWebViewClient(new WebViewClient());

    }