Geek Answers Handbook

Incorrect height in iPhone simulator when resizing web page using jQuery Mobile and Cordova

I tried adding AdMob to the Cordova project, so I resized the webview when the application loaded.

- (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view size, or its subviews (eg webView), // you can do so here. /*add admob*/ CGSize sizeOfScreen = [[UIScreen mainScreen] bounds].size; CGSize sizeOfView = self.view.bounds.size; CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame]; if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)) { //landscape view code CGPoint origin = CGPointMake(0, sizeOfScreen.width - CGSizeFromGADAdSize(kGADAdSizeSmartBannerLandscape).height-statusBarFrame.size.width); bannerView_ = [[[GADBannerView alloc]initWithAdSize:kGADAdSizeSmartBannerLandscape origin:origin] autorelease]; }else{ //portrait view code CGPoint origin = CGPointMake(0, sizeOfScreen.height - CGSizeFromGADAdSize(kGADAdSizeSmartBannerPortrait).height-statusBarFrame.size.height); bannerView_ = [[[GADBannerView alloc]initWithAdSize:kGADAdSizeSmartBannerPortrait origin:origin] autorelease]; } bannerView_.adUnitID = MY_BANNER_UNIT_ID; bannerView_.rootViewController = self; [self.view addSubview:bannerView_]; GADRequest *request = [GADRequest request]; request.testing = YES; [bannerView_ loadRequest:request]; /*resize webview*/ CGRect webViewFrame = [ [ UIScreen mainScreen ] applicationFrame ]; CGRect windowFrame = [ [ UIScreen mainScreen ] bounds ]; webViewFrame.origin = windowFrame.origin; if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)){ webViewFrame.size.height = sizeOfScreen.width-CGSizeFromGADAdSize(kGADAdSizeSmartBannerLandscape).height-statusBarFrame.size.width; webViewFrame.size.width = sizeOfScreen.height; }else{ webViewFrame.size.height = windowFrame.size.height-CGSizeFromGADAdSize(kGADAdSizeSmartBannerPortrait).height-statusBarFrame.size.height; webViewFrame.size.width = sizeOfScreen.width; } self.webView.frame = webViewFrame; [super viewWillAppear:animated]; }

Now the webview size should be 320X410. But, more about a 10px empty block at the bottom of the page when it loads. The same problems also appear in landscape representation.

Screenshots are being taken. This is executed screenshots

This only occurs when the website is resized, and the content exceeds the screen. These problems will appear in the simulator iphone 5.0 5.1 6.0, and not in the 4-inch portrait representation of Retina, and not in the simulator ipad.

This is the html code:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Single page template</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script> </head> <script type="text/javascript"> $(document).ready(function() { alert($(window).height()); alert($(document).height()); alert($("body").height()); }); </script> <body> <div data-role="page"> <div data-role="header"> <h1>Single page</h1> </div><!-- /header --> <div data-role="content"> <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> </div><!-- /content --> </div><!-- /page --> </body> </html>

config.xml

 <preference name="KeyboardDisplayRequiresUserAction" value="true" /> <preference name="SuppressesIncrementalRendering" value="false" /> <preference name="UIWebViewBounce" value="false" /> <preference name="TopActivityIndicator" value="gray" /> <preference name="EnableLocation" value="false" /> <preference name="EnableViewportScale" value="false" /> <preference name="AutoHideSplashScreen" value="true" /> <preference name="ShowSplashScreenSpinner" value="false" /> <preference name="MediaPlaybackRequiresUserAction" value="false" /> <preference name="AllowInlineMediaPlayback" value="false" /> <preference name="OpenAllWhitelistURLsInWebView" value="false" /> <preference name="BackupWebStorage" value="cloud" />

app inits

 self.window = [[[UIWindow alloc] initWithFrame:screenBounds] autorelease]; self.window.autoresizesSubviews = YES; self.viewController = [[[MainViewController alloc] init] autorelease]; self.viewController.useSplashScreen = NO; self.viewController.wwwFolderName = @"www"; self.viewController.startPage = @"index.html";

Cordoba 2.3.0 Xcode 4.5.2 jQuery Mobile 1.3.0 beta1, 1.2.0

How do I fix this problem? Thanks!

+4
source share
2 answers

This issue has led jquery-mobile to limit the minimum screen height. In the portrait screen, min-height is 420 pixels, in landscape orientation, min-height is 300 pixels. When the height of the web widget changes to 410px, more than about 10px the empty block at the bottom.

jquery.mobile-1.2.0.min.css

 media screen and (orientation: portrait){ .ui-mobile, .ui-mobile .ui-page { min-height: 420px; } } media screen and (orientation: landscape){ .ui-mobile, .ui-mobile .ui-page { min-height: 300px; } }

Overwriting or removing css rules can fix these problems.

 <html style="min-height:0px">

or

 html{ min-height: 0px !important; }
+1
source

use viewport tag in html head

 <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densityDpi=device-dpi" />

also make sure that the EnableViewportScale mast is true to enable zoom.

+1
source

More articles:


All Articles