4

AdMobをCordovaプロジェクトに追加しようとしたので、アプリの読み込み時にWebビューのサイズを変更しました。

- (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];
}

これで、Webビューのサイズは320X410になります。ただし、ページの下部にある約10pxの空白のブロックが読み込まれます。同じ問題がランドスケープビューにも表示されます。

これは実行されたスクリーンショットです。 これは実行されたスクリーンショットです

これは、Webビューのサイズが変更された場合にのみ問題になり、コンテンツが画面を超えても問題はありません。この問題は、iphone 5.0 5.1 6.0シミュレーターで発生し、Retina4インチポートレートビューおよびipadシミュレーターでは発生しません。

これはhtmlコードです：

<!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" />

アプリの初期化

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

この問題をどのように修正すればよいですか？ありがとうございました！

4

2 に答える 2

1

HTMLヘッドでビューポートタグを使用します

<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" />

また、EnableViewportScaleマストがtrueスケールを有効にすることを確認してください。

于 2013-01-31T17:32:31.840 に答える
1

この問題が原因は、jquery-mobileが画面の最小の高さを制限しているためです。縦向きの画面min-heightでは420ピクセル、横向きの画面では300ピクセルmin-heightです。Webビューの高さを410pxに変更すると、下部に約10pxの空白のブロックが追加されます。

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;
  }
}

cssルールを上書きまたは削除すると、この問題を修正できます。

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

または

html{
  min-height: 0px !important; 
}
于 2013-02-02T19:14:06.880 に答える