Wrong height in iPhone simulator when webview resize using jQuery Mobile and Cordova

0 votes

I tried to add AdMob into Cordova project, so I modified the webview size when app loading.

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. 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 size of the webview should be 320X410. But, more about 10px blank block at the bottom of the page when it loads. The the same issues also appears in the landscape view.

This is executed screenshots. This is executed screenshots

This issues only when webview resized, and content exceeds the screen has no issues. This issues will appear in the iphone 5.0 5.1 6.0 simulator and not in Retina 4-inch portrait view and not in ipad simulator.

This is 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";

Cordova 2.3.0 Xcode 4.5.2 jQuery Mobile 1.3.0 beta1, 1.2.0

How should I fix this issue? Thank you!

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
777 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29, 2022 in Web Development by rajatha
• 7,680 points
1,458 views
0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
• 7,680 points
4,641 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
8,169 views
0 votes
0 answers

How to get mobile number from facebook login using jquery?

I am trying to work facebook login ...READ MORE

Jul 19, 2022 in Web Development by gaurav
• 23,260 points
826 views
0 votes
0 answers

How can I specify Google map with driving direction in jQuery mobile

I have done a Google Maps based ...READ MORE

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
593 views
0 votes
0 answers

Page Reload/Refresh executes $(document).ready() on every page in jQuery Mobile

My jQuery mobile applications consists of multiple ...READ MORE

Jul 22, 2022 in Web Development by gaurav
• 23,260 points
945 views
0 votes
1 answer

Using jQuery in a Blackboard Building Block

The previous answer is correct in that ...READ MORE

answered Jul 26, 2022 in Web Development by rajatha
• 7,680 points
635 views
0 votes
0 answers

How to preselect and disable specific checkboxes using js/jquery?

I have checkboxes with randomly generated ids ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
432 views
0 votes
0 answers

jquery virtual keyboard - Curser not blinking in Chrome and Edge

I used the jQuery virtual keyboard, but ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
381 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP