方向更改时，UIWebView不能正确调整大小吗? [英] UIWebView dones't resize correctly when orientation change?
问题描述
我在视图控制器的视图上添加了一个webview，一个titleLabel和一个CoverflowView作为其子视图，我希望它在方向改变时改变大小.我已通过以下方法更改了Webview的框架:
I have add a webview,a titleLabel and a coverflowView on a viewcontroller's view as its subviews, I want it to change size when the orientation change. I have change the webview's frame in this method:
- (void)willRotateToInterfaceOrientation: (UIInterfaceOrientation)toInterfaceOrientation duration: (NSTimeInterval)duration
如果我以纵向方向启动应用程序，则将iPad从directionLandscape旋转到orientationPortrait或从orientationPortrait旋转到DirectionationLandscape时，其内容的大小会调整，但是很奇怪，当我以横向方向启动应用程序时，其内容不会调整大小.但是，NSLog显示框架已更改.至于titleLabel和CoverflowView，它们的大小可以正确调整.我是否怀疑是因为CSS?我已经使用CSS根据WebView的高度和宽度来控制内容的样式，有人可以帮我找到原因吗?代码如下:
its content did resize when rotate iPad from orientationLandscape to orientationPortrait or from orientationPortrait to orientationLandscape if I start the application with portrait orientation, but it is so strange that its content dosen't resize when I start the application with landscape orientation...But the NSLog shows the frame has changed. As to the titleLabel and the coverflowView, they resize correctly. I doubt if it is because of css?I have use css to control the content's style according to the height and width of webview.Does anyone could help me to find the reason? the code is below:
- (void)willRotateToInterfaceOrientation: (UIInterfaceOrientation)toInterfaceOrientation duration: (NSTimeInterval)duration {
double i = 0;
NSInteger width=self.view.frame.size.width;
NSInteger height=self.view.frame.size.height;
NSLog(@"view :%@",[self.view description]);
switch (toInterfaceOrientation){
case UIInterfaceOrientationPortrait:
{
NSLog(@"rotate to Portrait");
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){
self.docView.frame=CGRectMake(0, 50, width+20, height-70);
self.toolbar.frame=CGRectMake(0, 0,height , 50);
for (UIView * view in [toolbar subviews]) {
if ([view isKindOfClass:[UIButton class]] && view.tag==kBackButtonTag){
view.frame=CGRectMake(width-60, 6, 50, 36);
}else if([view isKindOfClass:[UIButton class]] && view.tag==kReloadButtonTag){
view.frame=CGRectMake(width-160, 6, 80,36 );
}
}
[coverflow setFrame:CGRectMake(0, 0 , width+20, height/2-50)];
[titleLabel setFrame:CGRectMake(width/2-40,height/2-100, 100, 20)];
if ([[[UIDevice currentDevice]model]isEqualToString:@"iPad"]) {
self.viewer.frame=CGRectMake(0, 0, 768, 1004);
}else{
self.viewer.frame=CGRectMake(0, 0, 320, 480);
}
}
i=0;
}break;
case UIInterfaceOrientationPortraitUpsideDown:
{
NSLog(@"rotate to PortraitUpsideDown");
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){
self.docView.frame=CGRectMake(0, 50, width+20, height-70);
self.toolbar.frame=CGRectMake(0, 0,height , 50);
for (UIView * view in [toolbar subviews]) {
if ([view isKindOfClass:[UIButton class]] && view.tag==kBackButtonTag) {
view.frame=CGRectMake(width-60, 6, 50, 36);
}else if([view isKindOfClass:[UIButton class]] && view.tag==kReloadButtonTag){
view.frame=CGRectMake(width-160, 6, 80,36 );
}
}
[coverflow setFrame:CGRectMake(0, 0 , width+20, height/2-50)];
[titleLabel setFrame:CGRectMake(width/2-40,height/2-100, 100, 20)];
if ([[[UIDevice currentDevice]model]isEqualToString:@"iPad"]) {
self.viewer.frame=CGRectMake(0, 0, 768, 1004);
}else{
self.viewer.frame=CGRectMake(0, 0, 320, 480);
}
}
i=180;
} break;
case UIInterfaceOrientationLandscapeLeft:{
NSLog(@"rotate to LandscapeLeft");
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){
// self.coverflow.frame=CGRectMake(0, 0, height+20, width-20);
self.docView.frame=CGRectMake(0, 50, height+20, width-70);
self.toolbar.frame=CGRectMake(0, 0,height+20 , 50);
for (UIView * view in [toolbar subviews]) {
if ([view isKindOfClass:[UIButton class]] && view.tag==kBackButtonTag) {
view.frame=CGRectMake(height-60, 6, 50, 36);
NSLog(@"button %@",[view description]);
}else if([view isKindOfClass:[UIButton class]] && view.tag==kReloadButtonTag){
view.frame=CGRectMake(height-160, 6, 80,36 );
}
}
[coverflow setFrame:CGRectMake(0, 0 , height+20, width/2-50)];
[titleLabel setFrame:CGRectMake(height/2-40,width/2-80, 100, 20)];
if ([[[UIDevice currentDevice]model]isEqualToString:@"iPad"]) {
self.viewer.frame=CGRectMake(0, 0, 1024, 748);
}else{
self.viewer.frame=CGRectMake(0, 0, 480, 320);
}
}
i = 90;
}break;
case UIInterfaceOrientationLandscapeRight:{
NSLog(@"rotate to LandscapeRight");
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){
// self.coverflow.frame=CGRectMake(0, 0, height+20, width-20);
self.docView.frame=CGRectMake(0, 50, height+20, width-70);
self.toolbar.frame=CGRectMake(0, 0,height+20 , 50);
for (UIView * view in [toolbar subviews]) {
if ([view isKindOfClass:[UIButton class]] && view.tag==kBackButtonTag) {
view.frame=CGRectMake(height-60, 6, 50, 36);
}
else if([view isKindOfClass:[UIButton class]] && view.tag==kReloadButtonTag){
view.frame=CGRectMake(height-160, 6, 80,36 );
}
}
[coverflow setFrame:CGRectMake(0, 0 , height+20, width/2-50)];
[titleLabel setFrame:CGRectMake(height/2-40,width/2-80, 100, 20)];
if ([[[UIDevice currentDevice]model]isEqualToString:@"iPad"]) {
self.viewer.frame=CGRectMake(0, 0, 1024, 748);
}else{
self.viewer.frame=CGRectMake(0, 0, 480, 320);
}
}
i = -90;
}break;
}
//[webViewController willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
// [self.view setNeedsDisplay];
// NSLog(@"coverflowView :%@",[self.coverflow description]);
NSLog(@"webview :%@",[viewer description]);
[viewer stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"window.__defineGetter__('orientation',function(){return %f;});",i]];
[viewer stringByEvaluatingJavaScriptFromString:@"var e = document.createEvent('Events'); e.initEvent('orientationchange', true, false); document.dispatchEvent(e); "];
}
- (void)viewDidLoad {
self.view.clipsToBounds=YES;
self.view.autoresizesSubviews=YES;
// self.view.autoresizingMask=UIViewAutoresizingNone;
viewer=[[UIWebView alloc]initWithFrame:self.view.bounds];
[self.view addSubview:viewer];
viewer.delegate=self;
viewer.scalesPageToFit=NO;
viewer.autoresizesSubviews=NO;
viewer.autoresizingMask=UIViewAutoresizingNone;
viewer.dataDetectorTypes=0;
// viewer.autoresizingMask=UIViewAutoresizingFlexibleWidth |UIViewAutoresizingFlexibleHeight;
NSLog(@"webView :%@",[viewer description]);
// [viewer setFrame:CGRectMake(0, self.view.bounds.size.height/2 , self.view.bounds.size.width, self.view.bounds.size.height/2)];
// [viewer setBounds:CGRectMake(0, self.view.bounds.size.height/2 , self.view.bounds.size.width, self.view.bounds.size.height/2)];
UIScrollView *scroller=[viewer.subviews objectAtIndex: 0];
if (scroller) {
scroller.alwaysBounceVertical=NO;
scroller.bounces=NO;
scroller.scrollEnabled=NO;
}
[self viewHomePage];
//[self createCoverFlowView];
[self createPopView];
//[self setHomeButtonPosition];
//[self setSettingButtonPosition];
#if __IPHONE_OS_VERSION_MIN_REQUIRED > 30000
UILongPressGestureRecognizer* longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
[self.view addGestureRecognizer:longPress];
longPress.minimumPressDuration=2.0;
longPress.delegate = self;
longPress.cancelsTouchesInView = NO;
longPress.allowableMovement=20;
[longPress release];
UITapGestureRecognizer* singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
[self.view addGestureRecognizer:singleTap];
singleTap.delegate = self;
singleTap.cancelsTouchesInView = NO;
[singleTap release];
#endif
//[viewer setOpaque:YES]; //透明
[super viewDidLoad];
}
推荐答案
我花了大约两天的时间来跟踪此问题，因为我遇到的是完全相同的问题.我发现，如果我的视图以纵向"模式开始，则可以正确调整为横向".但是，如果我以横向"模式启动视图，它将在纵向"中保持相同的大小.
I spent about two days trying to track this problem down, as I was having the exact same issue. I found that my view if it started off in Portrait mode would correctly resize to Landscape. But, if I started the view in Landscape mode, it would keep the same size in Portrait.
如果您的视图是设备的整个宽度，则只需添加以下meta标签即可.
If your view is the entire width of the device, just adding the following meta tag will work.
<meta name="viewport" content="width=device-width" />
但是，就我而言，我们的UIWebView是非标准尺寸.将视口设置为device-width只会使情况变得更糟！通过使用javascript动态设置视口，我能够正确解决所有问题.这应该在UIWebViews父视图的layoutSubviews期间完成.您可以在willRotateToInterfaceOrientation中进行此操作，但是我发现如果在willRotate中进行操作，则某些尺寸和接口可能未正确设置.首先在那里尝试一下，看看动画是如何工作的.
But, in my case, our UIWebView is a nonstandard size. Setting the viewport to device-width just makes it worse! I was able to have everything work out correctly by setting the viewport dynamically using javascript. This should be done during the UIWebViews parent view's layoutSubviews. You can do it in the willRotateToInterfaceOrientation, but I found out if you do in willRotate some of the sizes and interfaces might not be setup correctly. Try it there first and see how the animation works.
代码仅将视口大小设置为当前帧大小.您正在查看的HTML必须已经有一个meta viewport标记(如上所述).如果您无法编辑HTML，则可以使用其他方式通过javascript添加它.最简单的方法是将meta标记添加到<head>标记中.然后，使用以下代码，在正确设置框架之后:
The code just sets the viewport size to the current frame size. The HTML you are viewing must have a meta viewport tag already (as above). If you can't edit the HTML, there are other ways of adding it via javascript. The easiest is to just add in the meta tag into the <head> tag. Then use the following code, AFTER you have set the frame correctly:
// assuming your self.viewer is a UIWebView
[self.viewer stringByEvaluatingJavaScriptFromString:
[NSString stringWithFormat:
@"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%d;', false); ",
(int)self.viewer.frame.size.width]];
如果您不希望用户缩放比例或要设置最大缩放比例，则可以添加其他视口项目.最终使该视图对于我们的UIWebView而言行为正确.
You can add in other viewport items if you don't want the user to scale, or you want to set the max scale. This ended up making the view behave correctly for our UIWebView.
这篇关于方向更改时，UIWebView不能正确调整大小吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
