CODEWITHSUNDEEP
jqueryiphonehtmlcssjquery-mobile
Simon D.
Simon D.

Reputation: 61

JQuery mobile 100% height page, which equals visible area

I have a problem dealing with the website height on an iphone. The following set up works pretty well on all other devices (ipad,android phones), but on an iphone device the site height won't get updated after the url bar disappears and a blank area is visible at the bottom of the page.

<!DOCTYPE html> 
<html> 
    <head>
        <title>temp</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

        <style type="text/css">
            .ui-page{
                min-height: 100% !important;
            }
        </style>    
    </head> 

    <body> 
        <div data-role="page" id="loadscreen" data-theme='c'>
            <div data-role="content">
                <div>
                    <a href="#" onClick="window.scrollTo(0, 1)">Scroll Up</a>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

Site: http://jsfiddle.net/hb8NH/2/

Upvotes: 3

Views: 7561

Answers (3)

Khaled Lela
Khaled Lela

Reputation: 8119

Try to set webView native property :

    // fix orientation issue
 [webView setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)];

That work for me.

Upvotes: 0

JDubDev
JDubDev

Reputation: 174

Remove

.ui-page{
    min-height: 100% !important;
}

JQueryMobile calculates the necessary height and sets the Min-Height style to the Page to make sure it fills the entire page.

You'll notice that on an iPhone in Safari (after removing the min-height) that you get a slight over scroll available that will hide your "Scroll Up" text. JQueryMobile is calculating the min height based on screen size i believe. That way if saved to the home screen of the iphone (where there are no safari toolbars, header or footer) your page will still fill the screen.

Upvotes: 1

halfpastfour.am
halfpastfour.am

Reputation: 5923

Try changing the following

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

To

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

It shure does the trick for me.

Upvotes: 0

Related Questions