With an ionic/phonegap application I've this issue (Only on iOS).
When the user need to write something o select and option the iOS control (keyboard or dropdown) appears and when it does the web-view is compress to half. I'm using vh and vw measure unit in CSS.
What I've done/tried:
This post in ionic's forum The OP solved it by changing vh and vw units back to pixels. That's no a solution for me.
Ionic keyboard plugin using the method cordova.plugins.Keyboard.disableScroll(true); didn't work. Tried with false and true.
Add parameters to the meta tag Non working. My current meta:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Image when keyboard is hidden:
Image when keyboard is shown:
On the 2nd image you can barely read left text - right text because the height for the input is 24vh.
I create a dummy page where I do not use vh and vw and this works ok. On Android works fine too. It seems that when de keyboard or dropdown comes up the height of viewport is resize and vh size adapts to it.
Since I can't change it to px I'm looking for other alternatives
The parent container(s) that holds the input element cannot contain height:100% or 100vh on iOS if thats what you are trying to do. I had this similar issue on iOS timepicker reducing the screen size and showing blank just like yours.
This usually happens if the keyboard height is half compared to the screen height of iOS device. On larger screens like iPhone 6, this issue doesn't happen.
I used min-height:480px and height:100vh on the same container that gets resized. It fixed my issue on the smaller devices.
This cordova.plugins.Keyboard.disableScroll(true); is not required.
Let me know if this works for you.
Related
I built a responsive website (http://www.cjkrause.de/borgo-v2) which behaves strangely on both android and ios smartphone devices. I have a navigation bar that seems to force the browser to shrink the whole site in order to fit it into the window. But there is no width set on this bar, so it should just rearrange its content to fit it on the screen.
I already have this in my header section:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
See here how it shows on my android phone:
android appearence
On a desktop browser, even in responsive emulation, everything works fine.
It looks to me as if the problem is with your map towards the bottom of the home page.
It's in an iframe with a hard coded width of 600px, so it doesn't scale down on smaller viewports and causes other elements on your page to expand.
I'm trying to write a responsive website that set's the maximum height to 100% and everything is on-screen without needing to scroll. Setting {height: 100vh} works on a flex box in the desktop. However, when I view the site on mobile, then it scrolls, ignoring the height of the browser tab in chrome. I would like to set the height to something like {height: calc(100vh - address bar)} so that it shrinks the height of the document so everything fits without scrolling or hiding the browser tab.
Have you included the viewport meta tags in the head of the web page. From experience this can change the effect that certain CSS has on the mobile version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that's doesn't work out, perhaps use media queries and use 100% instead of 100vh.
I have a somewhat-responsive Bootstrap website. Above 1200px, the container is 1170px wide and below that, it scales down to 970px. Anything below that will also get the 970px version.
In my meta tags, I have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Everything works perfectly on Desktop computers as well as on iPhone or iPad devices. However on Android based mobiles like Samsung Galaxy (where the viewport is 360x640px I believe), the website shows fine too in landscape mode, except that it is zoomed in every time a page loads. Meaning it shows fine, but the user would have to scroll left and right. The user can zoom out and then it shows full-width without having to scroll, but the next time a page loads, the same happens again.
Is there any simple way to adjust/fix this?
I tried removing the width=device-width part, but that messes with the design on iOS devices and 1px lines don't show properly.
Try using
#media (whichever desired screens)
html{zoom:0.7} // this value is not calculated just an example
You can calculate using device width / your html width
This is has worked for me .. i need to zoom out on tablets so i added this..
I'm using the following line in my webapp:
<meta name="viewport" content="width=720, maximum-scale=1, user-scalable=no" />
This works perfectly fine on mobile safari - the document is 720px wide and fits the screen perfectly. However, when tested on the HTC One, the content was like 2.5x the width of the screen.
Android is supposed to support the viewport tag, so why is it ignoring the pixel width it should be displaying in?
All help appreciated.
Answer taken from Android docs:
Whether the user can change the scale of the page at all (zoom in and out). Set to yes to allow scaling and no to disallow scaling. The default is yes. If you set this to no, then the minimum-scale and maximum-scale are ignored, because scaling is not possible.
In that case, remove user-scalable=no and see what happens. That might be the fix you need.
I'm developing a web app for android using jquery_mobile.
Is there any equivalent way to 'layout_width:wrap_content'?
I want to set width for a label according to device width?
Any other options will also be welcomed.
You can solve this through a combination of viewports and CSS.
You are most likely already using a viewport similar to the one below, since you use jQuery Mobile:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
If you then set the width of your label to 100% it should have the width of the screen, assuming it is the outmost element. Otherwise it will have the width of its parent-element.
If it still has the wrong size try to define the width of each parent-element in the dom tree down to your label.