Question

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

因此，下面的示例图片显示了如何使用1px top和2px bottom渲染具有1px top和1px bottom border的div。这个问题也发生在其他地方，这使得设计看起来很便宜......

有什么建议吗？

enter image description here

某些代码

活性

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;

}

PHONE

Galaxy 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());

    }

WebView中的边框大小以不同方式呈现

2 个答案: