Why is Android WebView loading webpage differently than the default browser? - android

I'm having a problem related to this one. Basically, the same WebView displays differently on Android 2.2 and Android 4.0. In Android 4.0 it displays the mobile version of the website, while in 2.2 it displays the web version of it. Also, in the default web browser on Android 2.2 it displays the mobile version like it should. Is this a known bug? I have tried different settings for the webview so far but I always get this problem, on real devices and in the emulator.
I have attached 2 screens to see the difference. And here is the code. Note that I have tested pretty much all the combinations for the settings and to no use.
`
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.setInitialScale(1);
webView.getSettings()
.setUserAgentString(
"Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3");
webView.loadUrl("http://www.fernbus24.de/");
}`
Why is the display different? What does the WebView on Android 4.0 have that the other one doesn't?

It's not an Android bug, it's the website and the way it recognizes mobile devices. I tried google.com and facebook.com and they loaded the mobile version without problems.

Related

How to request desktop in a webview?

I searched Google and stack exchange and found about 15 different solutions, none of which work. They either throw syntax errors upon compiling, or they just don't work on the website I'm requesting. (Tradingview.com/chart)
When I go to my target website in chrome and click Request desktop, it works fine. In the webview in the app I'm building, it doesn't work. Google displays as desktop, but my target site does not. However, it does display properly in chrome or Firefox, just not my app.
What I tried:
Every solution provided here: Setting WebView to view Desktop Site and Not Mobile Site
Including this library https://github.com/delight-im/Android-AdvancedWebView/blob/master/README.md
This
How to open desktop site in webview in android
That
How to load Desktop view instead of mobile view in webview
The other
setUserAgentString in Android webview has no effect on HTTP header used in loadURL()
Most of those don't cause any change (on my target site), while a few of them throw syntax errors, sometimes up to 13 of them.
I tend to see comments being left saying something to the effect of, "Contact the website owner to make them change their site." That's not an acceptable solution, and is unhelpful without further explanation. How is it that in chrome, Firefox, Opera, etc. I'm well able to see a desktop version of the page, but it isn't working on the webview? This needs to be explained if the only answer is that it's"the website's fault contact the owner."
Right now I've got this in here,
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setUserAgentString("Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/57.0");
webView.loadUrl("http://facebook.com");
This works fine on Facebook.com for example, but not TradingView.
After much trial and error, I came to a solution. This isn't perfect, but much closer. (Maybe comments can help correct my code where I've fallen short)
webview_chart.getSettings().setLoadWithOverviewMode(true);
webview_chart.setInitialScale(200);
webview_chart.getSettings().setUseWideViewPort(false);
webview_chart.getSettings().setMinimumFontSize(16);
String newUA= "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19";
webview_chart.getSettings().setUserAgentString(newUA);
webview_chart.loadUrl("http://tradingview.com/chart");
What this seems to do is spoof a larger screen size, which causes responsive design to send desktop version rather than mobile. It's not perfect, as you can see I have to adjust minimum font size up so things are readable, and on smaller screens it still doesn't work.
But that's the reason you can send desktop headers and still get a mobile site.
(I haven't found an explanation like this anywhere else, so I think it can be helpful to others having this same problem)

Other than user agent, what else does Chrome desktop mode do?

I have an Android browser that uses the WebView. I allow my users to switch the user agent and I've added a few user agents, one of which is the desktop mode user agent Chrome uses. The desktop mode user agent works great on some sites but on others it doesn't, however Chrome can request a desktop site on those websites just fine.
So what else is Chrome doing?
Thanks.
It also ignores any viewport meta tag and uses the default width of 980px. Source: https://crrev.com/5252baa9fbff3f1ffda51a4390cdf43070af22d7
Some web sites switch between desktop and mobile purely based on user agent sniffing, but others just use responsive CSS (and reasonable event handlers). You can identify a responsive site from desktop chrome by enabling device emulation in Chrome's developer tools: The site will immediately transform into the mobile version.
WebView doesn't seem to support this desktop mode exactly. Setting setUseWideViewPort(true) and setLoadWithOverviewMode(true) might be similar, but I'm not sure. See Force webview to display desktop sites, which links to a WebView subclass that provides a lot of additional functionality.
webview.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(request.getUrl().toString());
return false;
}
});
webview.getSettings().setMinimumFontSize(12);
webview.setInitialScale(150);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(false);
webview.getSettings().setSupportZoom(true);
webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setDisplayZoomControls(false);
webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webview.setScrollbarFadingEnabled(false);
webview.getSettings().setAppCacheEnabled(false);
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
String newUA= "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19";
webview.getSettings().setUserAgentString(newUA);
webview.loadUrl( ipAddress + "/wordpress/resume/");
webview.reload();
Got it to load Wordpress site in desktop mode because one plugin like to pull columns.

Web Content not rendering on Android Web view

I have a web content which is a collection of html ,js and static content like images, videos etc.
When I host the web content in a web server in some other system. I can render them from my Android stock browser (Using HTC One 4.4.2) but not from Chrome browser.
If I take the content locally and serve it from an embedded web server (NanoHTTPD) in my application. (This is my actual use case) the videos in my web content are not rendering.
Same problem happens when I am trying to load the same content as loadURL in my web view. So its seem its not the problem of how I am using the NanoHTTP server in my application and serving my content. Problem seems to be the configuration or rendering of Web View otherwise serving it from my system server would have worked.
In my web view I have enabled all the settings.Below is the code for the confugration of Web view.
webView = (WebView) findViewById(R.id.webView);
progressBar = (ProgressBar) findViewById(R.id.progressBarForWebView);
WebSettings webViewSettings = webView.getSettings();
webViewSettings.setJavaScriptEnabled(true);
webViewSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webViewSettings.setPluginState(PluginState.ON);
webViewSettings
.setUserAgentString("Mozilla/5.0 (Linux; U; Android 4.4.2; en-in; HTC_One_dual_sim Build/KOT49H) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30");
String userAgentString = webViewSettings.getUserAgentString();
webView.getSettings().setAllowFileAccess(true);
webView.setSoundEffectsEnabled(true);
webView.setWebViewClient(new MyWebViewClient());
Even set the user agent to the string received from the stock browser. I read from the https://developer.chrome.com/multidevice/webview/overview that from 4.4 the rendering engine of Chrome and WebView is same.
Since my content does not run on Android Chrome but on Android Stock browser, would the web view also not render my content even if I change my user agent for it ?
Any other ways to render my content ?
Cheers,
Saurav

Issue to run javascript in webview with Android version 4.0.3

I'm doing some stuffs. I got unbelievable issue with Webview. I am not able to run javascript with webview in android version 4.0.3. I'm calling webpage that contains java script. I am able to run that with all the version remaining 4.0.3. Is it global issue with this particular version or I'm doing something wrong?
Here is my code:
mMainWebView = (WebView) findViewById(R.id.MainWebView);
mMainWebView.getSettings().setUserAgentString("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.36 (KHTML, like Gecko) Chrome/13.0.766.0 Safari/534.36");
mMainWebView.getSettings().setJavaScriptEnabled(true);
mMainWebView.getSettings().setPluginState(PluginState.ON);
mMainWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(
false);
mMainWebView.setWebChromeClient(new MyWebChromeClient());
mMainWebView.loadUrl("http://mypage.aspx?Go=Go&IMEI=11111111&MAC=00:00:00:00:00:00");
My Javascript at webpage:
javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl11", "", false, "", "http://mypage.com", false, true))
Please help me with your best suggestions.
Thanks,

Android Webview issue for Twitter even with DomStorageEnabled enabled

I have tested the following issue on Galaxy Note 2.3, Sony tablet 3.2 as well as Galaxy Y 2.3 and the issue is 100% reproducable. As suggested on many threads , webview.getSettings().setDomStorageEnabled(true); does the trick. But i am observing that first time when the Webview loads twitter.com , its going blank . Then if i say webview.reload() or again call load Url then twitter loads correctly every time until i exit the app (Preferably Force stop from settings) . This issue is happening for all sites which give WebConsole error. If i reload the same site , then its loading correctly. Is anyone having the same issue ?
Following is a small snippet of code i use.
webview = new Webview(activity.context);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setDomStorageEnabled(true);
webview.loadUrl("http://www.twitter.com");
Hardcoding the Useragent as suggested on other threads solved the problem
webview.getSettings().setUserAgentString("Mozilla/5.0 (Linux; U; Android 2.0; en-us; Droid Build/ESD20) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17");
What will be the disadvantages of this dirty trick ? Will it affect the sites loading on a tablet ?
Will users be able to go to the desktop site if they want to ?

Categories

Resources