1

I've recently built an app that uses a full screen web view to load a website I don't own. (Therefore, no control of site code)

I need the webview to display a desktop version of the site, and desktop http header spoofing didn't do the trick. I found that it's the viewport size that determines whether the site sends mobile or desktop, due to the site's responsive design rules.

On my Pixel XL, this code causes the page to look right:

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");

The three things that seem to be key here are

  1. WideViewPort must be false (or I get mobile view)
  2. InitialScale = 200 makes it display desktop on my device, but things look tiny and far away. Therefore:
  3. MinimumFontSize = 16.

Now, this causes everything to look fine on my phone, and other devices with a similar screen size, but smaller screens have issues.

On my wife's original Moto X, InitialScale 200 still gives mobile site. Changing that to 150 and reducing font size a bit makes it look perfect on the Moto X, but then on the Pixel, things are too small and spaced far apart, as if margins are larger on everything.

How can I make this webview display correctly in different screen sizes? I'm not even sure that the code I'm using is best practice for pulling off such a feat. I just hacked it together and found that it worked to show a rightly sized desktop view (Tons of late night trial-and-error). But it turned out to not work on other screen sizes. What can I change to make this flexible, or adaptable, or responsive, in dealing with the website's responsive design rules?

Matt Zabojnik
  • 179
  • 12

1 Answers1

0

You need to set the viewport because the target website appears to be using responsive design based on dimensions of the viewport and not based on HTTP request headers. This approach is a common CSS practice.

You may find thorough documentation here: https://developer.android.com/guide/webapps/targeting.html#Viewport

hexicle
  • 2,121
  • 2
  • 24
  • 31
  • Thanks. Based on those docs, would I include window.devicePixelRatio(1.5); If so, how? I've tried a few different things- getting errors on compile. Am I heading in the right direction? – Matt Zabojnik Jan 03 '18 at 02:36