I've got Android application running in landscape mode on 10" tablet with 1280x800 px resolution. App contains web view including picture with 1280x720 px size, so it's kind of full screen web view.
If I run the very same application on HTC One X smartphone, which is 4.7", 720 x 1280 px, also in landscape mode, web view seems to display only part of the picture, much less as I would expect. It even looks like physical 1/4 of the original, top left quarter.
Does anybody have any experience of running same app on similar or even different resolutions with completely different physical screen sizes?
Any recommendations?
For instance, I would like to run this app also on 7" tablets, where the resolution is only 1024x600 px. Can I still do that without need of changing picture size?
- 546
- 11
- 26
4 Answers
That is just the behavior of a web view/web page in general. Unless you tell it to with JavaScript or css, it wont care how big your screen is and will display all the content at the exact pixel size specified. You can more than likely dynamically re-size the image with JavaScript or css.
This may be what you are looking for: How can I resize an image dynamically with CSS as the browser width/height changes?
-
OK, as a first test, I've made simple app with one webview displaying 1280 x 720 px image in html page. It looks correct on 10" 1280 x 800 GTab2. Otherwise, on 7" GTAB2 1024*600 or HTC One X, 1280 * 720, I have to scroll right and down to see the rest. But, if I run the same html page from Chrome or native browser (both on HTC One X), image is displayed correctly. So now, my question is, what is wrong with my web view or what settings I am missing? – MartinC Oct 14 '13 at 14:16
-
I got to the point of using viewport meta tag in my html page displaying image, so hopefully, I'll get the final solution. – MartinC Oct 15 '13 at 14:42
-
OK, whatever I do with settings of meta tag viewport, webpage in webview is always displayed zoomed in. I can then double tap to zoom out to see the whole page as desired. I don't know how to achieve zoomed out startup. I guess double tap is Android touch listener issue. – MartinC Oct 18 '13 at 09:28
According to this thread:
Android Webview initial zoom out
This is the right answer:
webview.getSettings().setLoadWithOverviewMode(true);
This will cause the webview to be zoomed out initially.
webview.getSettings().setUseWideViewPort(true);
The Webview will have a normal viewport (like desktop browser),
You can create separate stylesheets for each density.
http://developer.android.com/guide/webapps/targeting.html#DensityCSS
- 19
- 7
just to conclude this, all changes had to be done on portal side in html, js and css in order to display it correctly on various tablets.
Playing with settings of WebView element didn't help in this case.
- 546
- 11
- 26