I have an application that displays html pages from resource assets in a WebView. The WebView was chosen in order to permit navigation links on the page, and all navigation action is handled in a WebView Client class by interrupting new page requests and returning the required local asset. The activity that contains the WebView supports both portrait and landscape orientations, and the WebView is configured ("setInitialScale" and "WebSettings") in "onCreate". Pages are displayed to fit inside the width and vertically scrollable. This has worked fine until the ICS update.
Under ICS the initial page selected still displays as before, but further page links that are displayed are wider than the screen width (and include a horizontal scroll bar). This occurs if the device is in portrait or landscape orientation when the initial page is loaded. Rotating the device to landscape and back to portrait solves the problem (causing a re-load of the activity as if the displayed page were the first one), but navigating back to previous pages while in portrait orientation causes them to again have widths that exceed the device display, even when returning to the primary page which was displaying correctly.
This is mostly an annoyance - but the inconsistent behavior is worrying. Unfortunately, there are several other "tweaks" associated with this code (mostly to re-size images within the html to fit the screen and retain the WebView scroll position when the orientation changes). While these could be a source of the current problems, a quick log output of their results shows they are working as expected, suggesting it is the ICS WebView behavior has changed.
I have searched for any similar postings of the problem without finding any direct reference, so my question is really open. Has anyone else seen anything like this in the ICS WebView class, or should I be looking for another source for the changed behavior?
Update:
After eliminating one line of code after another for hours (grrrr), I have identified the problem.
When running under android api 14 or higher, the WebView has unpredictable behavior after setting the view scale with "setInitialScale" to values larger than 100% when the viewport is fixed at the device width (using the meta tag name="viewport" content="width=device-width" in the html css). The initial page load seems to respect the device width, but subsequent page loads may or may not render with the viewport wider than requested, almost randomly.
This may be the expected behavior, although the unpredictability suggests that it is not (and if it is, then it is a fix from the behavior under previous versions).
The code used was setting the scale to allow the user to adjust the text display size in preferences, with the size of page images being "fixed" to a value in code before the page is loaded. This has been replaced by maintaining the page scale at 100%, and setting the text size from the user's preferences using "WebSettings.setDefaultFontSize", which has removed the rendering problems.
Related
I have an web app that's basically just displaying mobile website in an Android Webview, with some native bits for handling notification & navigation headers.
The issue is, when I change the Display Size setting (under Display) in an Android phone to anything smaller than Default, the content will be squeezed to the right side and left a blank space. I did a check with dev tool, and somehow the CSS's width is set to 66.67% of parent's by Android (in default it's 100%) & a minor left padding is also added. However, if the Display Size setting is larger than default, there is none / very minor style degradation.
The interesting part is when similar app is made in iOS (just display mobile site), there's no issue at all after changing the Display Size. So I'm pretty certain that the fix is limited to Android.
Is there any guidance to add code to anticipate these changes, or at least, completely disable the Display Size setting's effects?
*Edit:
What I've tried & failed:
Setting "width=device-width, initial-scale=1" in the website
Set loadWithOverviewMode and useWideViewPort to true
Combination of both of them
Solution is simple actually: there's a piece of old CSS code in the website that overrides CSS values when the width of the display is above certain threshold.
I'm using the showcaseview library in my Android app to display a first time tutorial to new users. So far it's been fairly straightforward to get going; I have a number of different viewpager tabs at the top of the page that are getting consecutively showcased, which is great ... in portrait mode.
However when the device is rotated, or I start my app in landscape orientation, the title and content text that I have for my showcase is displayed at the bottom of the screen and it eventually overflows off the screen. The showcase text content isn't more than a sentence and I can't think I'm the first person to have this problem so I'm wondering if any one else has come across this and how they solved it?
I was thinking that since showcaseview calculates the best position for the text based on free canvas space that I could probably move my content up by reducing the radius of the showcase cirlce, although I have yet to try this.
Also, I don't want to restrict users by locking the orientation to portrait mode during the tutorial.
EDIT: I've temporarily settled for locking the screen to portrait orientation if I deem the height and width of the target device to be too small. It's not my ideal solution so I'm still keen to hear the thoughts of any showcaseview users out there.
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 have WebView that is added on top of the running activity. I like this WebView to always show in portrait, so I rotate it if the application is in landscape, but calling setRotation() causes the WebView to go blank, i.e. setting the rotation to any value that isn't 0 causes the page to show up blank.
I'm not really sure what's happening (I used to think the page just shows up off screen, but it's blank for the smallest of values too), but is there a way to get around this?
My friend found the answer. You have to turn off hardware acceleration.
webViewInfo.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/