4

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?

Michael Falck Wedelgård
  • 2,943
  • 1
  • 27
  • 39

2 Answers2

1

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.

Michael Falck Wedelgård
  • 2,943
  • 1
  • 27
  • 39
0

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.

Oscar Paz
  • 18,084
  • 3
  • 27
  • 42
  • Thank you for helping Oscar, the html,body css is as you would recommend. My Footer is already positioned absolute. This is a quick example of how it looks: [Code link](http://codepen.io/anon/pen/gqyde) – Michael Falck Wedelgård Mar 03 '14 at 09:34
  • I've copied your code and tested it out it seems like this bad boy messes up the keyboard/layout of the footer. If this meta-tag is removed it works fine. So a stand alone web app, seems to have trouble with this. Any suggestions on how to fix it? – Michael Falck Wedelgård Mar 03 '14 at 12:55
  • In which way does it mess it up? Please, explain. Ah, and are you testing it in an iPad or iPhone? – Oscar Paz Mar 03 '14 at 12:57
  • I've tested on an iPad Mini (retina) and iPhone 4, the problem occurs on both. I've uploaded the html here: [website](http://home.wedelgaard.dk:7171/testApp/) As mentioned the problem only occurs when the app is saved as an app on the home screen. It works fine i safari. – Michael Falck Wedelgård Mar 03 '14 at 14:16
  • I added two new meta tags to the answer. Try using them. It works fine for me. – Oscar Paz Mar 03 '14 at 15:04
  • I've updated the code. Still same issue. Which version are you running on you iOS device? Seems weird that your standalone version works fine but mine does not. – Michael Falck Wedelgård Mar 03 '14 at 18:41
  • iOS 6. I coult test it in iOS 7, but not before wednesday. – Oscar Paz Mar 03 '14 at 18:42
  • Would be much appreciated Oscar if you were able to :) It might be a iOS7 only problem :( – Michael Falck Wedelgård Mar 03 '14 at 19:51