web-dev-qa-db-fra.com

Le contenu HTML s'adapte à UIWebview sans effectuer de zoom arrière

Je me sers de la UIWebView pour rendre du code HTML. Cependant, bien que la largeur de ma vue Web soit de 320, mon code HTML est toujours affiché sur toute la largeur et peut défiler horizontalement.

Je souhaite obtenir les mêmes résultats que les applications de messagerie natives: adapter le contenu HTML de cette largeur sans effectuer un zoom arrière. Comment l'application de messagerie native génère-t-elle le rendu HTML de cette manière?

Mettre à jour

Je pensais que l'utilisation de la méta-balise viewport aiderait, mais je n'ai pas réussi à faire en sorte que cela fonctionne.

C'est ce qui se passe:

enter image description here

Comme vous pouvez le constater, le contenu ne correspond pas à la largeur de l'appareil. J'ai essayé autant de combinaisons de balises méta viewport. Voici un exemple de ce qui se passe lorsque j'essaie la suggestion de Martins.

Le HTML original est peut être trouvé ici .

La façon dont ce code HTML est rendu par l’application de messagerie native ressemble à celle-ci .

iphoneobjective-cuiwebview
49
Abs

Voici ce que vous faites:

Dans votre contrôleur d'interface utilisateur propriétaire de la vue Web, définissez-le comme suit: UIWebViewDelegate. Lorsque vous définissez l'URL à charger, définissez le délégué comme contrôleur:

NSString *urlAddress = @"http://dl.dropbox.com/u/50941418/2-build.html";
NSURL *url = [NSURL URLWithString:urlAddress];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];  
webView.delegate = self;

Et enfin, implémentez le webViewDidFinishLoad: pour définir correctement le niveau de zoom:

Cette option sera applicable à partir d'iOS 5.0 et> 

- (void)webViewDidFinishLoad:(UIWebView *)theWebView
{
  CGSize contentSize = theWebView.scrollView.contentSize;
  CGSize viewSize = theWebView.bounds.size;

  float rw = viewSize.width / contentSize.width;

  theWebView.scrollView.minimumZoomScale = rw;
  theWebView.scrollView.maximumZoomScale = rw;
  theWebView.scrollView.zoomScale = rw;  
}

J'espère que ça aide...

Option B, vous pouvez essayer de modifier le code HTML (cet exemple fait bien l'affaire mais n'est pas parfait du point de vue de l'analyse syntaxique HTML. Je voulais simplement illustrer mon propos. 40 peuvent probablement être détectés par programme, je n'ai pas essayé de le rechercher.

NSString *urlAddress = @"http://dl.dropbox.com/u/50941418/2-build.html";
NSURL *url = [NSURL URLWithString:urlAddress];

NSString *html = [NSString stringWithContentsOfURL:url encoding:[NSString defaultCStringEncoding] error:nil];
NSRange range = [html rangeOfString:@"<body"];

if(range.location != NSNotFound) {
  // Adjust style for mobile
  float inset = 40;
  NSString *style = [NSString stringWithFormat:@"<style>div {max-width: %fpx;}</style>", self.view.bounds.size.width - inset];
  html = [NSString stringWithFormat:@"%@%@%@", [html substringToIndex:range.location], style, [html substringFromIndex:range.location]];
}

[webView loadHTMLString:html baseURL:url];
129
mprivat

Ajoutez simplement ceci:

webView.scalesPageToFit = YES;
57
Denis

Ce qui a fonctionné pour moi a été de sélectionner UIWebView dans Interface Builder et de cocher la case "Ajuster la page à la taille": 

enter image description here

5
Chris Livdahl

En règle générale, vous devez utiliser la balise méta viewport. Mais son utilisation est très erratique, surtout si vous souhaitez une page Web multiplateforme.

Cela dépend aussi du contenu et des css que vous avez.

Pour ma page d'accueil iPhone, qui doit redimensionner automatiquement de portrait en paysage, j'utilise ceci:

<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no">

Si vous avez besoin d'un redimensionnement spécial, vous pouvez également utiliser l'événement:

<body onorientationchange="updateOrientation();">

avec la fonction correspondante dans votre javascript:

function updateOrientation() {
  if(Math.abs(window.orientation)==90)
      // landscape
  else
      // portrait   
}

MODIFIER :  

En vous voyant source de la page, il semble que vous l'avez fait avec un éditeur Web, n'est-ce pas?

OK, je comprends. Votre div principale a une largeur de 600px. La résolution de l'écran de l'iPhone est 320x480. 600> 320 donc il dépasse les limites de l'écran.

Faisons maintenant quelques opérations simples:

320 / 600 = 0.53
480 / 600 = 0.8

Vous souhaitez donc effectuer un zoom arrière 0,5 fois minimum et 0,8 fois maximum. Permet de changer la fenêtre d'affichage:

<meta name="viewport" content="width=device-width; minimum-scale=0.5; maximum-scale=0.8; user-scalable=no">
5
Martin
@implementation UIWebView (Resize)

- (void)sizeViewPortToFitWidth {
    [self stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=%d;', false); ", (int)self.frame.size.width]];
}

@end
1
Werner Altewischer

Swift 3:

Utilisez cette extension pour redimensionner le contenu de la vue Web en fonction de la taille d'une vue Web.

extension UIWebView {
    ///Method to fit content of webview inside webview according to different screen size
    func resizeWebContent() {
        let contentSize = self.scrollView.contentSize
        let viewSize = self.bounds.size
        let zoomScale = viewSize.width/contentSize.width
        self.scrollView.minimumZoomScale = zoomScale
        self.scrollView.maximumZoomScale = zoomScale
        self.scrollView.zoomScale = zoomScale
    }
}

Comment invoquer? 

webViewOutlet.resizeWebContent()
1
aashish tamsya

Vous pouvez générer une NSAttributedString à partir de HTML (faites-le en arrière-plan):

@implementation NSAttributedString (Utils)

+ (void)parseHTML:(NSString *)html withCompletion:(void (^)(NSAttributedString *completion, NSError *error))completion
{
    dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){
        NSError * __autoreleasing *error = nil;
        NSAttributedString *result = [[NSAttributedString alloc] initWithData:[html dataUsingEncoding:NSUTF8StringEncoding]
                                                                      options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType,
                                                                                NSCharacterEncodingDocumentAttribute: @(NSUTF8StringEncoding)}
                                                           documentAttributes:nil error:error];
        NSError *safeError = (error != nil) ? *error : nil;
        dispatch_sync(dispatch_get_main_queue(), ^(void){
            completion(result, safeError);
        });
    });
}

@end

Et montrez-le à travers l'instance UITextView:

[NSAttributedString parseHTML:htmlString withCompletion:^(NSAttributedString *parseResult, NSError *error) {
        bodyTextView.attributedText = parseResult;
}];

Certaines fonctionnalités de présentation, cependant, peuvent corrompre cette approche.

0
nrx