iPhone UIWebView 宽度在缩放操作后不适合 + UIInterface方向改变

Question

我使用 UIWebView 创建了一个简单的 iPhone 应用程序（缩放页面以适合 = YES，shouldAutorotateToInterfaceOrientation = YES）并加载了一个网页，例如 https://stackoverflow.com /

旋转设备显示 UIWebView 会自动调整大小以适应宽度。好的。

错误：放大页面然后缩小。现在旋转设备会在其中一个方向上显示 UIWebView 的宽度很奇怪（如果你放大横向，则纵向宽度很奇怪，反之亦然）。仅当您导航到另一个页面时，此行为才会修复。

正确：在 Mobile Safari 中加载相同的 URL。旋转作品和无论缩放练习如何，宽度都适合。

这是 UIWebView 错误吗（可能不是）？或者是否需要做一些事情才能让事情像在 Mobile Safari 中一样“正常工作”？

Answer 1

我找到了对我有用的东西。问题是，当 uiwebview 更改其方向时，Web 内容会缩放以适应视口。但是滚动视图子视图的zoomscale参数没有正确更新（也没有更新minimumZoomScale和maximumZoomScale

那么我们需要在willRotateToInterfaceOrientation处手动执行：

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
    CGFloat ratioAspect = webview.bounds.size.width/webview.bounds.size.height;
    switch (toInterfaceOrientation) {
        case UIInterfaceOrientationPortraitUpsideDown:
        case UIInterfaceOrientationPortrait:
            // Going to Portrait mode
            for (UIScrollView *scroll in [webview subviews]) { //we get the scrollview 
                // Make sure it really is a scroll view and reset the zoom scale.
                if ([scroll respondsToSelector:@selector(setZoomScale:)]){
                    scroll.minimumZoomScale = scroll.minimumZoomScale/ratioAspect;
                    scroll.maximumZoomScale = scroll.maximumZoomScale/ratioAspect;
                    [scroll setZoomScale:(scroll.zoomScale/ratioAspect) animated:YES];
                }
            }
            break;
        default:
            // Going to Landscape mode
            for (UIScrollView *scroll in [webview subviews]) { //we get the scrollview 
                // Make sure it really is a scroll view and reset the zoom scale.
                if ([scroll respondsToSelector:@selector(setZoomScale:)]){
                    scroll.minimumZoomScale = scroll.minimumZoomScale *ratioAspect;
                    scroll.maximumZoomScale = scroll.maximumZoomScale *ratioAspect;
                    [scroll setZoomScale:(scroll.zoomScale*ratioAspect) animated:YES];
                }
            }
            break;
    }
}

希望这有帮助！

Answer 2

我已经尝试过 M Penades 的解决方案，这似乎也对我有用。

我遇到的唯一问题是，当在 3G 上运行时，轮换不是很顺利。

因此，我现在使用不同的方法：

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {

[super didRotateFromInterfaceOrientation:fromInterfaceOrientation];

CGFloat scale = browserWebView.contentScaleFactor;
NSString *javaStuff = [NSString stringWithFormat:@"document.body.style.zoom = %f;", scale];
[browserWebView stringByEvaluatingJavaScriptFromString:javaStuff];

}

最好的问候，
拉尔夫

Answer 3

- (UIScrollView *)findScrollViewInsideView:(UIView *)view
{
    for(UIView *subview in view.subviews){
        if([subview isKindOfClass:[UIScrollView class]]){
            return (UIScrollView *)subview;
        }

        UIScrollView *foundScrollView = [self findScrollViewInsideView:subview];
        if (foundScrollView){
            return foundScrollView;
        }
    }

    return nil;
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    switch (self.interfaceOrientation){
        case UIInterfaceOrientationLandscapeLeft:
        case UIInterfaceOrientationLandscapeRight:
        {
            UIScrollView *webViewScrollView = ([self.webView respondsToSelector:@selector(scrollView)])
                ? self.webView.scrollView
                : [self findScrollViewInsideView:self.webView];

            [webViewScrollView setZoomScale:1.01f animated:YES];
        }
            break;

        default:
            break;
    }
}

尝试此代码，它会微不足道地更改缩放级别（1.01）以允许 UIWebView 在横向模式下增加内容大小

findScrollViewInsideView：添加方法以支持 ios4

Answer 4

我有一个解决这个问题的方法，但我得说我不是它的忠实粉丝。它效果很好，但该解决方案实际上会导致另一个问题。我已经解决了第二个问题，但这需要一些努力。

请记住，自从 OS3.2 或 iOS4（不确定是哪一个）以来，UIWebView 的直接子视图现在是 UIScrollView 而不是 UIScroller，因此我们可以用它做更多的事情。另外，由于访问 View 的子视图不是私有操作，因此使用转换为文档化视图的子视图也不是私有操作，我们可以在不违反规则的情况下使用 UIWebView 做很多事情。

首先，我们需要从 UIWebview 获取 UIScrollView：

UIScrollView *sview = [[webView subviews] objectAtIndex:0];

现在我们需要更改此滚动视图的委托，以便我们可以覆盖滚动视图委托调用（这实际上可能是此解决方案导致的次要错误的原因，我会稍后分享）：

sview.delegate = self;

现在，如果您此时尝试，缩放功能就会被破坏。我们需要实现一个 UIScrollViewDelegate 方法来修复它。添加：

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    UIView *webBrowserView = [[scrollView subviews] objectAtIndex:10];
    return webBrowserView;
}

webBrowserView 实际上是一个 UIWebBrowserView，但这不是一个记录的类，所以我们只是将其视为 UIView。

现在运行您的应用程序，放大然后缩小网页。旋转，它应该正确显示。

这确实会导致一个相当大的错误，可能比原来的更糟糕。

如果放大然后旋转，您将失去滚动能力，但您的视图仍会放大。这是完成整个事情的修复。

首先，我们需要跟踪一些数字，并定义一个标志：

我在我的 h 文件中定义了这些数字：

BOOL updateZoomData;
float zoomData; //this holds the scale at which we are zoomed in, scrollView.zoomScale
CGPoint zoomOffset; //this holds the scrollView.contentOffset
CGSize zoomContentSize; //this holds the scrollView.contentSize

您可能认为您可以从 UIScrollView 中获取这些数字，但是当您需要它们时，它们会发生变化，所以我们需要将它们存储在其他地方。

我们需要使用另一种委托方法：

- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
    if(updateZoomData){
        zoomData = scrollView.zoomScale;
        zoomOffset = scrollView.contentOffset;
        zoomContentSize = scrollView.contentSize;
    }
}

现在我觉得它变得一团糟。

我们需要跟踪旋转，因此您需要将其添加到 viewDidLoad、loadView 或用于注册通知的任何方法中：

[[NSNotificationCenter defaultCenter] addObserver:self 
            selector:@selector(webViewOrientationChanged:) 
            name:UIDeviceOrientationDidChangeNotification 
            object:nil];

并创建此方法：

- (void)webViewOrientationChanged:(NSNotification *)notification{
    updateZoomData = NO;
    [self performSelector:@selector(adjustWithZoomData) withObject:nil afterDelay:0.0];
}

所以现在只要您旋转 webViewOrientationChange 就会被调用。 PerformSelector 延迟 0.0 秒的原因是我们想在下一个运行循环中调用 adjustmentWithZoomData。如果直接调用它，则 adjustmentWithZoomData 将调整为之前的方向。

这是 adjustWithZoomData 方法：

- (void)adjustWithZoomData{
    UIScrollView *sview = [[webView subviews] objectAtIndex:0];
    [sview setZoomScale:zoomData animated:YES];
    [sview setContentOffset:zoomOffset animated:YES]; 
    [sview setContentSize:zoomContentSize];
    updateZoomData = YES;
}

就是这样！现在，当您旋转时，它将保持缩放，并大致保持正确的偏移。如果有人想计算如何获得精确的正确偏移量，那就去做吧！

Answer 5

我自己正在研究这个问题，并发现了一些更多信息：

更改缩放时的问题：

1. 即使缩放级别更改，Safari 也经常无法正确重新绘制（如果有的话）。
2. 更改宽度会强制重新绘制。
3. 你可能会认为横向中的 width=device-width 会使用 1024，但它似乎使用 768（screen.width 也会发生）。

例如，如果当前宽度为 1024，并且您想在横向中从 1 缩放到 1.5，您可以：

• 更改宽度和缩放的组合，例如，将宽度更改为 2048，然后缩放到 0.75
• 将宽度更改为 1023（难看的锯齿？）
• 将宽度更改为 1023，然后下一行回到 1024（双重重画，但至少窗口被重画）。

Answer 6

所以显然我最终没有使用 M Penades 的解决方案（并且忘记更新这篇文章！抱歉）。

我所做的是调整整个文档的大小（并更改字体大小以保持比例）。这显然解决了问题。

但是，我的 UIWebView 仅用于加载我自己的 HTML 和 HTML。来自 iOS 文件系统的 CSS - 如果您正在构建通用 Web 浏览器，则此技巧可能不起作用。

ViewController.m

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
    switch (toInterfaceOrientation) {
        case UIInterfaceOrientationPortraitUpsideDown:
        case UIInterfaceOrientationPortrait:
            if ((UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)) {
                [webview stringByEvaluatingJavaScriptFromString:@"document.body.className = 'ppad'"];
            } else {
                [webview stringByEvaluatingJavaScriptFromString:@"document.body.className = 'pphone'"];
            }
            break;
        default:
            if ((UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)) {
                [webview stringByEvaluatingJavaScriptFromString:@"document.body.className = 'lpad'"];
            } else {
                [webview stringByEvaluatingJavaScriptFromString:@"document.body.className = 'lphone'"];
            }
            break;
    }
}

和 app.css

html>body.pphone { font-size:12px; width: 980px; }
html>body.lphone { font-size:18px; width: 1470px; }
html>body.ppad { font-size:12px; width: 768px; }
html>body.lpad { font-size:15.99999996px; width: 1024px; }

要点位于 https://gist.github.com/d6589584944685909ae5

Answer 7

我发布此内容是因为我也遇到了同样的问题，在这里我遵循 M Penades 方法。M Penades 的答案仅适用于用户不这样做的情况倾斜（捏出）Webview，然后旋转设备并重复此过程。然后 UiwebView 的内容大小逐渐减小。这就是 M Penades 答案中出现的问题。所以我也解决了这个问题，我的代码如下。

1）为此，我设置了捏合手势，以便当用户倾斜时 UIwebView 可以检查 UIwebView 的缩放尺寸。
//One This Please import The UIGestureRecognizerDelegate Protocol in '.h file'

     //call below method in ViewDidLoad Method for setting the Pinch gesture 

- (void)setPinchgesture
{
     UIPinchGestureRecognizer * pinchgesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(didPinchWebView:)];

    [pinchgesture setDelegate:self];

    [htmlWebView addGestureRecognizer:pinchgesture];
    [pinchgesture release];
   // here htmlWebView is WebView user zoomingIn/Out 

}
   //Allow The allow simultaneous recognition

  - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer   *)otherGestureRecognizer
  {
     return YES;
  }

返回 YES 保证允许同时识别。返回 NO 不能保证阻止同时识别，因为其他手势的代表可能会返回 YES

 -(void)didPinchWebView:(UIPinchGestureRecognizer*)gestsure
   {
   //check if the Scaled Fator is same is normal scaling factor the allow set Flag True.
    if(gestsure.scale<=1.0)
    {
    isPinchOut = TRUE;

    }
    else// otherwise Set false
    {
    isPinchOut = FALSE;
   }
  NSLog(@"Hello Pinch %f",gestsure.scale);
}

如果用户在这种情况下捏合/拉出 Web 视图，只需设置缩放因子。
这样 WebView 就可以根据内容的变化调整其 ContentSize。

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation   duration:(NSTimeInterval)duration {

   //Allow the Execution of below code when user has Skewed the UIWebView and Adjust the Content Size of UiwebView.

  if(isPinchOut){
  CGFloat ratioAspect = htmlWebView.bounds.size.width/htmlWebView.bounds.size.height;
  switch (toInterfaceOrientation) {
    case UIInterfaceOrientationPortraitUpsideDown:
    case UIInterfaceOrientationPortrait:
        // Going to Portrait mode
        for (UIScrollView *scroll in [htmlWebView subviews]) { //we get the scrollview
            // Make sure it really is a scroll view and reset the zoom scale.
            if ([scroll respondsToSelector:@selector(setZoomScale:)]){
                scroll.minimumZoomScale = scroll.minimumZoomScale/ratioAspect;
                scroll.maximumZoomScale = scroll.maximumZoomScale/ratioAspect;
                [scroll setZoomScale:(scroll.zoomScale/ratioAspect) animated:YES];
            }
        }
        break;

    default:
        // Going to Landscape mode
        for (UIScrollView *scroll in [htmlWebView subviews]) { //we get the scrollview
            // Make sure it really is a scroll view and reset the zoom scale.
            if ([scroll respondsToSelector:@selector(setZoomScale:)]){
                scroll.minimumZoomScale = scroll.minimumZoomScale *ratioAspect;
                scroll.maximumZoomScale = scroll.maximumZoomScale *ratioAspect;
                [scroll setZoomScale:(scroll.zoomScale*ratioAspect) animated:YES];
            }
        }
        break;
     }
  }

}

即使用户倾斜 UIWebView，这也非常有效。

Answer 8

旋转时，尝试将scrollView的zoomScale设置为0。
请在此处查看我的完整答案： UIWebView 内容未调整旋转后到新框架