UIWebView 在方向改变时没有正确调整大小?

UIWebView dones#39;t resize correctly when orientation change?(UIWebView 在方向改变时没有正确调整大小?)

问题描述

我在 viewcontroller 的视图上添加了一个 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 从orientationLandscape 旋转到orientationPortrait 或从orientationPortrait 到orientationLandscape 时，它​​的内容确实会调整大小，但是当我以横向启动应用程序时，它的内容没有调整大小真是太奇怪了..但 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.

如果您的视图是设备的整个宽度，只需添加以下元标记即可.

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 添加它.最简单的方法是将元标记添加到 <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 在方向改变时没有正确调整大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！