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.
Related
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.
I have made my game, which scaled accordingly to a % of the screen width with the Gdx.graphics.getWidth() method, and it works perfectly on all screens.
Now I am trying to learn viewports, but seems like there is a lot more trouble, like when does it take in world coordinated or when does it take actual screen pixels.
Do I have to constantly convert beetwen these two measurments? It seems like there is alot more trouble, than if I just scale it the old fasion way...
I can use the whole screen, and manually make the pictures non streched, if I used a FitViewport I would have like blackbars and the game would be totally different.
Any clear suggestions to why to use these ports, cause I cannot seem to understand them...
The thing is that you do not have to do anything especially making any conversion.
Viewport is a kind of tool that handling your app's rendering on many types of screens (I mean many other ratios) and you do not have to worry about it anymore.
Only thing you have to do is to "tell" viewport what is the size of your screen and to handle screen resizing by updateing the viewport. Then you are treating your app like it would be always for example 800 x 600px no matter how it looks actually.
The way your app will render depends on what viewport implementation you will use. For example:
FitViewport will fit your screen to device and add some black bars
FillViewport will fit your screen to device and cut off overflowing part
and so on...
The a look at official Viewport libGDX tutorial. Also you can take a look at this thread to get some information how to deal with viewports.
I am trying to get my game to look/scale well across different devices. I am attempting to introduce the dp and sp metrics into my apps as much as possible, but in this case I am refactoring a game to use these metrics for layout and widget sizing.
Where before, my layouts were sized using size_hint in order to have everything get it's size relative to it's parent(the app itself is not given a size, nor is the window, but the root widget/layout has size_hint=(1, 1)), I am now faced with replacing this system with dp values, and can't figure out what they should be.
I am thinking, that if I just size the root widget, App itself, or Window with dp, then I could continue to use size_hinting, as this would have a trickle down effect and scale everything correctly from the top on down, so to speak. And for this, It seemed like getting the resolution or density of a devices screen would be a great help(so I could use it to size my root widget/App/Window, per device). Is that possible with Kivy? Will this work? Is there a better way? What would you do? Thanks
Using size_hint alone already guarantees a degree of scale independence, as (as you note) all the sizes will be relative.
Kivy internally checks some resolution related values of the device, and this is basically the point of dp; something like dp(10) for instance should be the same actual size on any device, in terms of real size on the screen in e.g. centimetres. This won't actually be quite right, if nothing else I think devices don't report precisely right results, but unless this is very important it will already take care of making things mostly look the same anywhere.
I'm not sure what you mean about setting the App size - in Android's window manager an App just fills the screen (at least in most cases).
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?
iOS is easy, because the pixel-ratio is always either 1 or 2, and the target dpi is always pixels/ratio. Android, however uses 1.3, 1.5, and in some cases 2.25 for a pixel-ratio. I'm not aware of any way to set the target dpi to pixels/ratio for android devices, which would be an easy fix, but I imagine a pixel-imperfect solution for any display whose physical pixel count is an odd multiple of it's dips count (those 1.3's, 1.5's etc).
Right now I'm basically writing css for each -webkit-min-device-pixel-ratio, and just multiplying my px values by that ratio manually (with slight adjustments for rounding). Using ems works great for fonts and a few other things, but I have to use pxs for positioning and sizing of elements if I don't want half, empty, or overlapping pixels.
Is there a better way to do this?
If not, what is the best way to deal with background-images. I really don't want to have to re-write every single background-position for every icon for each ratio simply because I am changing the background-size for each device-pixel-ratio.
You can try using the viewport meta tag. It lets you match width to the device's width. It also allows you to set initial scaling, set bounds on scaling, or even disable scaling. And here is a link to a relevant Stack Overflow question and answer on using the meta viewport tag.