Question

I have a mobile webpage which I’m viewing with WebView but for some reason it renders the borders differently – 1px OR 2px thick. Has anyone experienced that?

So the sample picture below shows how a div with 1px top and 1px bottom border is rendered with 1px top and 2px bottom. This problem occurs in other places too, which makes the design look cheap…

Any suggestions?

SOME CODE

ACTIVITY

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

I’ve found the solution to this problem and it is well explained in the following tutorial.

Apparently the screen density affects the border and because my Galaxy S2 is ~1.5pixel density 1px becomes 2 in some of the borders (probably ~half of the time)

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

Hope this helps to others.