Loading Facebook in a WebView, behaves weird

Question

I'm loading m.facebook.com in my WebView, not sure how important that is, but the webview is in a container within a ViewPager.

Every time I launch the application and load the url I see one of the following results:

One which you would actually expect:

But the other is quite disturbing:

Why are these two behaviors?

The XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/Site_WebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

The setup code for the WebView:

webView.loadUrl(item.getUrl());
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setUserAgentString("My User Agent - Android");
webView.setWebChromeClient(new WebChromeClient() {});
webView.setWebViewClient(new WebViewClient() {});

I inflate the xml in the adapter, and add it to the container...

Answer 1

After understanding this is not a race condition between the ViewPager, and the drawer, I've dug into the page, t find out that Facebook customize the page width according to some parameters which I cared not about...

Later I've installed user agent switcher extension to Chrome, and been able to reproduce it, with a my custom user agent.

I did not expect the user agent to have such an effect on a page...

But hell, I've been wrong a billion times before!

Answer 2

After breaking my head all testing here, I found out that it is the 'user agent'. The m.facebook.com.br change the html / css code as the user agent that spent for it.

Remove this line in your code: settings.setUserAgentString ("My Agent - Android");

And everything will work.