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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With