![](/img/trans.png)
[英]Page is not found by the Iphone simulator when using ajax /Jquery Mobile-PhoneGap
[英]Wrong height in iPhone simulator when webview resize using jQuery Mobile and Cordova
我試圖將AdMob添加到Cordova項目中,因此在加載應用程序時修改了Webview的大小。
- (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];
}
現在,webview的大小應為320X410。 但是,加載頁面時,頁面底部的空白塊大約有10px。 相同的問題也出現在橫向視圖中。
這是執行的屏幕截圖。
僅當調整Webview的大小並且內容超出屏幕時,此問題才存在。 此問題將出現在iphone 5.0 5.1 6.0模擬器中,而不是在Retina 4英寸縱向視圖中,而不是在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";
科爾多瓦2.3.0 Xcode 4.5.2 jQuery Mobile 1.3.0 beta1,1.2.0
我應該如何解決這個問題? 謝謝!
使用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
以啟用比例。
這個問題造成的原因是jquery-mobile限制了屏幕的最小高度。 在縱向屏幕中, min-height
為420px,在橫向屏幕中, min-height
為300px。 將webview的高度修改為410px時,底部的空白塊會更多。
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.