Menu
I'm doing a responsive web site and I have this problem. Everything works well until I select an [input type="text"] and comes out the keyboard, entire site is resized, it's like the screen size is only the part above the keyboard. I just want that mantain the normal size. I've tried all the solution proposed on stackoverflow an other forum too, bun nothing seems to work.
Does anyone have any idea on how to fix this?
<head>
<title>SchoolIn</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
//other code
UPDATE: I'm going to try to explain better.
I have a head section
//other code
<div class="head">
//Here is some text
</div>
//other code
Then a content section
//other code
<div class="container">
<div class="content">
//other code
<input type="text" ...... />
<input type="password" ..... />
<input type="submit" ..... />
</div>
</div>
//other code
All the element are in percentage there is nothin in pixels.
When the keyboad comes out the header, the container and the content div are redimensioned, instead the input fields and the button don't. In any case they came out from their container, becouse the container goes smaller and they maintain the original size. I don't know if I made my self clear.
The question is the same, how I make it to remain to the original size when the keyboard comes out?
646
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Try this piece of html. I'm using it for every of my pages and it always did what it should. Maybe yours isn't working because of the missing minimum-scale attribute.
107
No <meta name='viewport'/> or percentage fixes worked in my case (Android 2.3 browser), so I ended up with this CSS:
body {
min-height: 350px;
}
You also need to do this for anything with height:auto.
It's a hack, but it at least makes the website usable in this edge case. As soon as the user tries to zoom, it snaps out of it.
34
Ok I've make it work, at least in part. The problem for me was that I made the HTML and BODY height 100%, so when the keyboard comes out the height becomes the part above it. If I don't declare any height it works just fine.
html, body{
height: 100%;
}
I said in part because I need the height of the device so I can make the proportion with the elements inside the page. If I don't declare the height the content of the page will be displayed in some smartphones for half screen, in other corectly. I've already made breaking points with media query, but I can't make it one for each resolution. I've create some ranges (ex: max-width:320 ---- min-width:321, max-width:480 .... and so one).
Again any ideas on how to solve the height problem?
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With