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.
Related
in IOS Webview, the input type="time" generates a time display widget that is approx 70 pixels wide and when tapped brings up the IOS time picker.
However in Android the same code brings up a 130 pixel wide widget that also brings up a timepicker, albeit a very different style of one. My problem is the widget is far too big for my user interface design to cope with, without a huge amount of re-work.
Does anyone know if it is possible to reduce the length of the time display widget in Android using CSS, or by reducing the fidelity of the time that could be displayed. or is it always set to match the length of the type="date" version.
Alternatively might it be possible to set its style to display:"none" and activate it using javascript by clicking elsewhere?. Has anyone tried this on Android webview?
On my web project I encountered a problem with android phones. If you just browse a page with default settings all is fine, but if in Settings > Display > Font > I change font-size to e.g. Huge then my UI elements become scaled.
I style my elements using em's mostly.
I tried fixes on topic of font boosting:
html * {max-height:9999999px}
or
text-size-adjust: none
In short, imagine I have 4 buttons stacked at the bottom of the screen horizontally. When I change the font size in android settings the buttons become huge and overlap each other, hence breaking the UI
Please help. :)
UPDATE
The accepted answer suggests that is is not possible from a css/js perspective. There may be some crazy hacks, but nothing worth thinking about for me. So if anyone finds a solution, please do post an answer.
This is expected behavior from Android Accessibility options.
As far as my knowledge goes there is no way to hack that from external css/js in the browser.
If you have a standalone app you can extend the WebView class and do getSettings().setTextZoom(100) which would ignore the text size from Accessibility.
In CSS em unit is relative to the font-size of the element (2em means 2 times the size of the current font).
Which means that it's dependent of the user's font settings.
The solution to your problem is to use another unit, like vw, which is relative the screen (viewport) width, 9vw ~ 9% of viewport width.
Or simply use an independent unit like pixels (px).
More about CSS units can be found here: http://www.w3schools.com/cssref/css_units.asp.
In my AIR mobile application I am trying to resize my application when the softkeyboard is activated so that the bottom of my application will not be covered by the keyboard. From what I have read this is suppose to be the default behavior but I have never been able to get it to work and I have tried everything I have found online, instead the keyboard overlays ontop of the application.
I then decided I would resize my application myself based on the height and y position of the softkeyboard only to find out that the built in AIR methods for determining the height and y position of the keyboard are not correct (YAY). I even tried using a 3rd party ANE for determining the screen height by FreshPlanet and their code does not always return correct values either. I feel like this shouldn't be that hard to figure out but I am stuck. Please help!
TLDR:
How can I resize my application to be the remaining screen space when the softkeyboard is activated?
What renderMode are you using? (in manifest.xml) I found that only cpu is working to get the correct keyboard height.
Also try to set softKeyboardBehavior to none: <softKeyboardBehavior>none</softKeyboardBehavior>
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.
According to this article I can get the total screen area using stage.fullStageWidth & stage.fullStageHeight. This total size includes toolbars.
How can I retrieve the client area, only the area where my app will be displayed?
The app was originally developed for iPad and I now want to deploy on Android tablets using mostly the same code. Most android tabs have a client height of around 600px (landscape), and this means that the bottom 168px of my app gets cropped, so all I need to do is detect the height and move some things about at runtime.
It is my understanding that to know the size of the client area (that is the size of the area where the flash or app is shown) you need to use StageScaleMode.NO_SCALE. When you use NO_SCALE then this size can be read using stage.stageWidth and stage.stageHeight (and changes detected by listening to Event.RESIZE on the stage).
In any other StageScaleMode, stage.stageWidth and stage.stageHeight will always return the stage size defined in the stage properties in the app at author time and will never change during runtime.