3

So basically, I created an Android WebView, in a 720 x 1280 screen. However when I evaluate screen.width and screen.height, the response is 360 and 640.

I understand that this may be partly so that content is displayed on a readable way, but, when I tried to set a static width to the WebView, like 1000px x 1000px, the Javascript still evaluates the same.

Is there a way to disable this, so that the content looks same as it would on a desktop screen, and the screen.width and screen.height return the real phone resolution or the one I manually set in the XML.

A Crosswalk (based in chromium) solution is also acceptable, even if it includes changing the source code, if WebView solution is not possible.

AMD
  • 1,278
  • 4
  • 15
  • 33
  • The `screen.width` issue appears to be an issue that's had people scratching their heads for a couple of years now. And I don't have the time to dig further at the moment. If all you need is the ability to fetch the real device width and height. You might be interested in binding a custom [JavascriptInterface](https://developer.android.com/guide/webapps/webview.html) object to your `WebView` which returns those values. – Passer by Aug 24 '16 at 19:51
  • The `webSettings.setUseWideViewPort(enabled); webSettings.setLoadWithOverviewMode(enabled); webSettings.setSupportZoom(enabled); webSettings.setBuiltInZoomControls(enabled);` calls should already resolve the display issue. – Passer by Aug 24 '16 at 19:52
  • @Passerby Unfortunately it does not. I ran it again with your settings and desktop UA and this is the result: http://i.imgur.com/3AOhF9X.png, it reports 640x320, while the real resolutions is more like 1920x700, but because it is a smartphone it is configured to ignore that so that reading is possible, but in my case, I need it just like it would look on a real monitor. So I need a way to tell it that a pixel should be interpreted as a pixel. – AMD Aug 24 '16 at 21:16
  • As you may see, `window.innerWidth` and `document.body.clientWidth` report 980, while I want the real res. 1920. So it is not looking like it would on a desktop, it is much larger. – AMD Aug 24 '16 at 21:22
  • I'm not sure what else you can do. It might be worthwhile looking into `webview.setInitialScale()`, and setting it to an appropriate value like 1 or something you evaluate from the device and webview sizes. Good luck! – Passer by Aug 24 '16 at 22:35

2 Answers2

1

If I understand you right, you want to show websites in desktop mode, not in mobile mode. To achieve this you can use this custom subclass of WebView: https://github.com/delight-im/Android-AdvancedWebView

It has a method setDesktopMode(true) that will do what you want.

Ugurcan Yildirim
  • 5,973
  • 3
  • 42
  • 73
  • I checked the source of the AdvancedWebView, and the setDesktopMode basically does this: `webSettings.setUseWideViewPort(enabled); webSettings.setLoadWithOverviewMode(enabled); webSettings.setSupportZoom(enabled); webSettings.setBuiltInZoomControls(enabled);` I have tried all these and they do not change the reported screen size. – AMD Aug 16 '16 at 19:12
  • This worked. I simply used setDesktopMode(true). Nothing else. – Dhruv Jan 17 '19 at 19:01
0

This maybe be due to the pixel ratio of the device.

see this thread for a detailed explanation

Note that different android screens will have different ratios depending on their resolutions. My experience is with iphone / ipad; and my solution was to detect the pixel ratio and use that as a multiplier for positioning all elements.

Also If feasible, I recommend positioning based on a multiplier rather than a fixed value. For example:

x = 0.5 * screen.width * xPixelRatio

will give you a relative position at 50% (i.e the middle) of the screen. By positioning elements in this way as long as your aspect ratio is the same the elements will always stretch to fit properly, and you can adjust for different aspect ratios by changing the xPixelRatio & yPixelRatio variables.

Community
  • 1
  • 1
Michael Whinfrey
  • 573
  • 4
  • 14
  • I understand what you mean, however I want to display pixel as a pixel, just like a desktop screen, so a phone with FHD screen on landscape, should fit a website exactly as a FHD desktop monitor. So basically, I want to disable the 'ratio'. – AMD Aug 24 '16 at 14:38