CODEWITHSUNDEEP
javascripthtmlcssios7mobile-safari
Michael Falck Wedelgård
Michael Falck Wedelgård

Reputation: 3183

web app - device-height / keyboard issue

hope you are able to help me with this annoying problem.

I'm currently building a web-app optimizied for Mobile Safari (iOS7). I want my page to be 100% height of the viewport. Currently my page is bigger than the viewport even thought I have specified the height in the css to 100%.

The solution to this problem was changing this:

<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0" />

by removing height=device-height

the problem is without the height meta tag, the footer is pushed up on the page when I touch/click an input field (when the keyboard shows up). As is I can choose fixed keyboard/input or correct page height :( Not ideal.

Anyone of you have had this issue, and found a solution where both problems are fixed?

Upvotes: 4

Views: 12078

Answers (2)

Michael Falck Wedelg&#229;rd
Michael Falck Wedelg&#229;rd

Reputation: 3183

I found a way to solve the problem. Its not ideal since I really wan't to avoid js to set styling in my app. But this piece of jquery javascript seems to work:

$('.page').css('height',$(window).height()+'px');

Assuming ".page" is your full-page container.

Upvotes: 1

Oscar Paz
Oscar Paz

Reputation: 18292

I assume you've got a footer with position: fixed, which is annoying in safari mobile. I can't be sure without seeing more code, but try this:

  1. Remove both width=device-width, height=device-height from the viewport meta tag.

  2. Use this CSS:

    html, body { width: 100%; height: 100%; overflow: hidden; }

  3. Use position:absolute in you footer instead of position: fixed.

EDITED

I created this simple page based on the content you posted. I opened it with my iPad and it works fine. When I tap on the input field, the keyboard slides up, but the footer remains in place (hidden under the keyboard).

html test page:

    <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <style>
            * {
               -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                box-sizing: border-box;         /* Opera/IE 8+ */
            }

            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .page {
                background: red;
                width: 100%;
                position: absolute;
                height: 100%;
                padding: 25px;
            }

            footer {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 200px;
                background: blue;
                padding: 25px;
            }

            input { width: 200px; }
        </style>
    </head>
    <body>
        <div class="page">
            <h1>Page</h1>
            <input type="text" />
            <footer>
                <h2>Footer</h2>
            </footer>
        </div>
    </body>

Try it yourself and tell me.

EDITED Try adding the two new meta tags I added to the head.

Upvotes: 0

Related Questions