I need to find a way to programmatically zoom out of a WebView on android. Background: I created a phonegap/cordova web app which has a fixed layout. I am using these settings to proper display of the app across devices:
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
this.appView.getSettings().setSupportZoom(true);
this.appView.getSettings().setDefaultZoom(ZoomDensity.FAR);
this.appView.getSettings().setBuiltInZoomControls(true);
this.appView.setInitialScale(0);
So far it worked well until a text input field gains focus. Then the app gets rescaled and its impossible to return to the proper view. I searched and worked on this problem for over a day now tried many possible solutions but none worked for me. The approach I am working now on is to make a native call when the text input field looses focus and then to reset the zoom. But I don't know a way to reset the zoom.
webView.zoomOut(); is too slow and webView.setInitialScale(..); does nothing.
I am looking for something like webView.setZoomLevel(..); or webView.setScale(..); but I can not find it in the api.
Pulling out my hair about this.. Please help.
BTW, my meta viewport setting is
<meta name="viewport" content="width=640,height=device-height,target-densityDpi=device-dpi" />
No answer for this question. I guess there is just no way to set the zoom level other than zooming out using the zoomOut() function. So I had to live with that.
Does one of the responses in this question help?
How to set the initial zoom/width for a webview
Brian first suggested: webview.getSettings().setUseWideViewPort(true);
and then littleFluffyKitty added: using setInitialScale(50) along with other zoom settings.
Good luck and I hope someone with more wisdom than I have gives you a better answer.
Related
I have been searching for a solution to this and have been striking out.
I have a JQM/Phonegap app that has a search bar in a Fixed position header. OnKeyup, it hits my API and returns results in a listview that is dynamically created and refreshed.
What my issue is, is that although it looks fine in Chrome when I am testing it, once I build it in phonegap and test on the phone, when you click in the search bar, there's an overlay on the box. Once you scroll through the results, this overlay moves both up and down, depending on your scroll.
I can provide code, but it's really only showing when I build it and test on Android. (4.0.4)
I have tried adding data-tap-toggle="false" to the header and moving the search bar down to the "content" area and changing it to a data-filter="true" UL, with both options, I still get the "bouncing" search input.
Any other thoughts? I've attached an example of how it's looking on the Android.
I finally found an answer for this. Not what I wanted, but here it is.
How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?
Another solution I found was to implement iscrollview https://github.com/watusi/jquery-mobile-iscrollview iscrollview is basically a library that integrates iscroll and jquery and it does all the nasty lifting for you.
After implementing this, the "bouncing" of the search box went away. YAY
When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).
There are some workarounds described in some forums but none of them worked for me.
I tried to put an <iframe> or an <a> between front and back
I tried to change the DOM so maybe the browsers state is refreshed
I tried to have the back elements be positioned as well
None worked
I'm especially having problems with the image map's area elements.
Has anyone had the same issue and managed to work around it?
I'm specifically interested in solutions which are tested against image maps.
I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.
Just trying to think out loud. Sometimes another take on it can be helpful.
This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.
yourElementClass:focus, yourElementClass:hover {
pointer-events: none;
}
Actually I've managed to avoid it by moving the objects below to let them be not visible.
But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs.
there are also some things that could help on some version/mobiles (but do not solve the problem)
the above item has background:rgba(0,0,0,0.1);
you should put a gif or png as background of the above element (as well as the background color as point 1)
using thouchstart instead of click as bind event sometimes helps.
the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.
Im working on this project for work atm where an e-learning will be played on the samsung galaxy tab. the game is just a website but will be showed as app.
When you log in for the first time you will see a popup with this welcome message, behind it is a black overlay with transparancy.
The problem is that on the PC while on firefox it all works great but on the tablet the Z-index doesnt seem to work. its impossible to debug and I couldnt find any documentation on this issue.
So does anyone know if z-index works differently on the tablet or how do I fix it?
The pop up has z-index 999 and the overlay is z-index 998,
Any ideas on this?
I will continue my search on google and will post all the progress I make.
Edit:
The overlay will be created in Jquery:
var showPopup = '<%=ViewData("showPopup").toString()%>'
if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); }
Solved now, see comment for solution.
Late to the party but, I found the best solution for this was to add -webkit-transform: translate3d(0,0,0); to the item that is absolute positioned and z-indexed.
Has solved my issue every time.
Found the answer,
the answer was partially on stackoverflow can be found here: Android Webkit: Absolutely positioned elements don't respect z-index
The rest was found in an tutorial.
The solution was the following:
I added the overlay in jQuery but the pop up was in the html but just hidden.
so I added that part of the code also to the jQuery check.
To prevent the pop up inheriting the opacity of the overlay I had to use the $('body').prepend again. It all works now.
any idea how to implement something like the multiple desktops of the android?
I tried Gallery but it sucks I wansted something just like the desktop app
thanks
have you tried using <ScrollView>? I've never tried this so i dont know if its possible, but you might try sticking some layouts in a ScrollView and then listen for the scroll event. When the scroll event happens, you can then automatically scroll them from 1 view to the other so that they never end up half way between one or the other... if you try this, please post the code, i'd be interested in seeing how you do it...
In my case I used this tutorial :
http://developer.android.com/training/animation/screen-slide.html
It works very well but there is still the large background image sliding a bit at each page change to do.
I have a web view that is loaded with an HTML that contains links.
when I switch to another activity (say to another tab in a tab
activity) and then switching back to it, the link is surrounded with
an orange rectangle. also happens in the GoogleAdView which really
makes it impossible to view.
Try this to prevent webview from drawing a focus rectangle when it is first focused
webView.getSettings().setNeedInitialFocus(false);
Try webView.setFocusableInTouchMode(false) - it worked for me. Also, read this link if you want to understand what drove me to this solution.
You should take into account though that this solution will make all text input boxes in your webpage unavailable...
Found another solution, but it requires access to the html itself. You need to set the following css property: -webkit-tap-highlight-color:rgba(0,0,0,0); This will not cause the problem with the input boxes.
It seems that the link in the WebView has the focus. Maybe you could avoid it by letting another view request the focus (anotherView.requestFocus();) in onResume() or onStart().