I have an html content with a mandatory fixed size (let's say 500px).
If the screen is large enough, I center the content.
However, if the width is less than 500px, I have to unzoom to have all the content. I guess I have to change the viewport in the html, but all my tries have failed.
Note: In every case, the user can zoom.
Do you have an idea how to achieve this?
Thanks.
The solution I have used is simply to call this method :
webView.setInitialScale(xxx)
When the scale is 100, it means no zoom.
Related
I'm using WebView to show some html content with different width. Initial scale is set up to show all page content. without horizontal scroll. This code is used:
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
Now I want to forbid zoom out but keep zoom in enabled. Can anyone help to find the way?
UPD:
Some additional explanations.
I want to limit minimum scale for webView. For example, If scale=0.67 make page to fit the width of WebView I want to forbid user set scale less then 0.67, but keep the possibility to set scale greater than 0.67. Main problem here is that displaying content has different width and therefore minimal scale is different for different pages.
I can tell you that what you are trying to achieve is a Bad UX. Zoom in and Zoom out are related to each other. If the user zoomed in by mistake, and found out that you are preventing him from zooming out. Expect disappointment and maybe 1 star on the market.
Even the WebView does not allow you to enable one and disable the other.
But if you really want to do that, then you need to implement the gesture by yourself and calculate the difference between the figures. If the difference is getting bigger (ZoomIn) otherwise (ZoomOut)
This link will help you implement the Zoom Gesture
I've been banging my head against the wall for the whole day now, and i need some help :(
The problem is, that i have a WebApp that was designed for 640x960.
We didn't have time to write css for each screen size, so i've used initial-scale, maximum-scale, minimum-scale in the viewport meta tag to scale the app to different screen sizes.
The problem is, that in Android 4.4, no matter what i do, it always scales the app up, but never down!
I mean if i use a value of 0.7, the app is scaled up. If i use a value of 1.3, it is scaled up again :/
I've tried to change the targetSdkVersion to different versions to get the old behavior, but with no luck.
Can someone help me?
UPDATE:
So i ended up using style="zoom: <value>%" on the body tag. I calculate the percentage based on the difference between the current device screen size and the resolution my app was designed for. Now everything fits.
A viewport of
<meta name="viewport" content="width=640, initial-scale=1">
should make your fixed layout always fit (see MDN for more on the viewport meta tag).
You could be bumping in some of the following:
the contents can't be scaled down more than 'overview scale' (that is, such that your content is narrower than the screen). This is by design - making it smaller only results in rendering white to the sides so why bother. If you want this behaviour you'd need to add padding to the content,
you've specified the layout height of the WebView to be WRAP_CONTENT - this makes the WebView ignore the viewport meta tag, don't do that - set it to MATCH_PARENT or a fixed size,
you're using certain WebSettings:
setUseWideViewport (which overrides the viewport meta tag) or
setInitialScale (which can alter the size of the viewport).
The best way to check if it's the content's fault or the WebView's fault is to see if the page works in Chrome on Android:
if it works in Chrome on Android but not in the WebView then set targetSdkVersion to 19 and try disabling WebSettings, changing your layout to fixed size, etc.. to see what's causing the problem. Maybe start from the other end - by making a super trivial WebView app that just loads the page - confirm that works and then slowly introduce changes to see which one causes the problem,
if it doesn't work in Chrome on Android then problem is the difference in viewport meta tag support between pre-KK WebView and Chrome on Android - this means you'll have to fix your content,
If you're still stuck post a zip that contains sources with a repro (doesn't have to be the full app, just the minimum to demonstrate the problem) and I can try and help you more from there.
Just had a run through of this after not quite being sure of the answer myself.
http://www.gauntface.co.uk/blog/2013/11/29/desktop-site-and-the-viewport/
You want a viewport without an initial-scale if you only want the webpage to fit the WebView's width.
Things that will affect the WebView:
Ensure you have setUseWideViewport() enabled so the page can be larger than the devices width: http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean)
Ensure you targetSDKVersion=19 to ensure you aren't getting any compatibilities for the old webview
If you want to prevent the user from zooming in or out, use user-scalable=no in the viewport rather than set a min and max.
I am using a WebView to display some maps in my app using the Google Static Maps API. However, when I load a map into my WebView, it's always either zoomed out too far (showing a massive amount of white space around the map) or too close (showing only part of the map). Given that I'm requesting a map of the same size as the size of my WebView, I should be able to "tightly" wrap with no issues, but I'm not sure how to achieve that.
I've tried just running at the default settings, and that results in the map being zoomed in too far (and scrollbars being displayed). I've also tried this:
mapView.getSettings().setLoadWithOverviewMode(true);
mapView.getSettings().setUseWideViewPort(true);
which just results in the page being fully zoomed out. Are there other alternatives I'm missing other than futzing around with the scale?
I had similar problem with the whitespace. What I did was to go into the CSS file for the WebView and edited the margin/padding on the image I was displaying to be negative (I just edited until I was happy) so it would display completely in the upper left corner.
Then I set the height and width of the webView in my Android XML file until I was happy with the result. However I was having a bit of a problem with the width showing some white space on some devices but the height was good once I had found the right value.
My solution to this was to try to set the width as the same as the height in the java.class file for the activity but I was not successful, maybe you will have more luck.
In the end I abandoned the webView for my project so I can't really give you any working code.
I am wondering why LayoutAlgorithm.SINGLE_COLUMN deprecated? It has use cases where NARROW_COLUMNS doesn't do the job:
I have a short HTML snippet that includes an image that is wider than the device screen. NARROW_COLUMNS doesn't resize the image to fit the screen, whereas SINGLE_COLUMN scales it down so the user cannot scroll horizontally (which is what I want).
Any ideas as to why it is deprecated?
Because they changed the Webcore.h class witch LayoutAlgorithm.SINGLE_COLUMN is embed to to.
I sugest you to find html layout solution.
NARROW_COLUMNS is also deprecated now and you have to use TEXT_AUTOSIZING which also doesn't work as expected.
http://developer.android.com/guide/webapps/migrating.html#Columns
Your best option is to find a custom WebView or, if you can, change your HTML.
Very general question: I have multiple widgets in a ScrollView Android app. A standard ScrollView, mobile can show say 720 lines and user can scroll down then back up going thru multiple widgets (text panes, buttons etc). Problem is that I want to add a WebView that will display an HTML table; the height of this HTML table will be variable size.
Is there a way to change the height of the WebView based on the size of the HTML table it should display?
Yes, you can get a reference to the WebView, then set the height of it, with the setHeight attribute.
Maybe you would be better off letting the container take care of that for you, and set the attribute to "wrap_content".
I guess, you need to calc web-view content size (here and here and enter link description here), than set webview size to content fits (maybe here). In that way you should have only scrollview scrolling.
Good luck