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.
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.
There are many screen resolutions in browsers nowadays, so using px in my CSS sizes isn't actually a good idea. I adopted and used vh in substitution for px since it is based on the current viewport's size and then adjust textbox/img/div or anything that has a size: ...vh;
This is actually good but somehow when I try to tap on the textboxes and then the keyboard appears, the stuffs resizes and shrinks down from this:
To this:
This somehow never happens on iOS, only on Android phones. (It's probably with Android's keyboard popping out and taking out real-space from the browser)
Is there someway to fix this, if not, is there anyway that I can adjust my textboxes/divs that'll still be responsive to any mobile resolutions? Thanks!
Since the Android keyboard might be consuming real space in the browser, the viewport height decreases causing everything to shrink. In this case, you can use pixels instead of vh as I don't think it's important to use vh. Using pixels in this case won't affect the site's responsiveness.
You can also check out this thread if it helps.
I still have trouble understanding the possibilities of Scaling my UI in a responsive way in my Air Mobile App. On the web I'm familiar with it and the use of media-queries.
I dont want to scale my whole UI up and down or even stretch it (e.g: I use the camera in one DisplayObjectContainer, so this would be really bad for the performance to scale this.)
I currently go down the road defining all the container sizes by percent, but that is getting pretty ugly pretty fast as it leaves me with 68.95px values. I think this will get me in trouble one day as blocks appear not crisp anymore. If I round the values, I might have 1px gaps between Elements.
Currently I have this Setup. The idea is, to give every main Component a (maybe invisible) empty background-child. These can then deformed by width & height by any desire. The inner Elements of any Element (button, logo, etc) are not affected by the deformation of the bg and can then be arranged accordingly (as I now have position and size of this container - like in css).
But this does not feel like it is the right way.
Is there a magic lib/class I dont use currently and that allowes me to build in hard pixel for a defined setup and behaves appropriate when it comes to different stageWidths, DPI, etc?
What are your approaches for this problem?
I have a TextView placed directly above a WebView. I am attempting to make the font style in the WebView match the font style in the TextView.
I was able to make the fonts the same size but there are still minor differences between the fonts' rendering (see screenshot comparison). Now I think this is very minor but our client was able to see the difference and was questioning it.
Is there any way to eliminate these rendering differences between TextView and WebView? If not can someone explain the reason for the differences? Are these differences caused simply because the WebView uses WebKit which has its own font rendering engine separate from the rest of the Android platform?
I'm not sure about TextView, but I know WebView is capable of positioning text on non-pixel-aligned boundaries, and I think this is what you're seeing. The WebView and TextView output look different because their positions are off by smaller-than-a-pixel amounts.
I assume your client is either using a low-density device or has really sharp eyes = )
If you tweak the position of the text a little it should eventually look the same. Where the WebView is concerned, it may help to ensure that all the zooming and reformatting features are turned off.
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?