Zoom in on webview on appearing - iphone

I have a UIWebView that loads a PDF that is setup in landscape format and is very hard to read on the iPhone screen. My code is like this:
- (void)viewWillAppear:(BOOL)animated {
NSURL *url = [NSURL URLWithString:_entry.articleUrl];
NSLog(#"%#",url);
[_webView loadRequest:[NSURLRequest requestWithURL:url]];
self.title = _entry.articleTitle;
timer = [NSTimer scheduledTimerWithTimeInterval:(1.0/2.0) target:self selector:#selector(tick) userInfo:nil repeats:YES];
}
What are some ways I could set it to be zoomed in more and possibly moved over to the right hand side of the top pdf page?

first make sure your UIWebView has scalesPageToFit property enabled
self.myWebView.scalesPageToFit = YES;
And then in your HTML add this tag inside the 'head' tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
you can make maximum-scale=1.5 if that will make it appears better.
I am not sure about if it is a PDF file how to add these tags to it. Maybe you can add the tags and implement the PDF inside the html file.
Here is how to embeded a PDF file inside HTML
<embed src="filename.pdf" width="500" height="375">
Good luck!

In IOS version less than 5:
UIScrollView *sv = [[_webView subviews] objectAtIndex:0];
[sv setZoomScale:2.0 animated:NO];// increase scale factor to zoom more
In IOS 5:
[_webView.scrollView setZoomScale:2.0 animated:NO];// increase scale factor to zoom more
You can use content offset to move to top right hand side

Related

UIWebView's property scalesPageToFit = YES not working correctly on larger images

In an iphone app i have a webview in which i want to preview some image downloaded from internet, my problem is that the some images are not viewed as to fit in the frame of webview, but most do. I think this is due to the fact that those images are too large. Am i doing something wrong? Please help
What i want is simply loading image in webview to fit the frame of webview. You can provide me some other code, but need to be regarding webview not imageview.
Here is the code i am using.
self.documentData = [NSData dataWithContentsOfURL:[NSURL URLWithString:#"http://www.folio3.com/corp/wp-content/uploads/2013/02/Entrance_A-3.jpg"]];
self.webView.scalesPageToFit = YES;
[self.webView loadData:self.documentData MIMEType:#"image/jpeg" textEncodingName:#"utf-8" baseURL:nil];
Plus here is the screenshot of output (clearly shows scroll indicators i-e image is not fit in webview's frame)
First Check and set frame of UIWebView in viewDidLoad: like bellow..
webView.frame = self.view.frame;
after use this Delegate method and set scalesPageToFit property like bellow..
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
webView.scalesPageToFit = YES;//set here
return YES;
}
This solution builds on the answer from Ammar Hasan. Instead of the original...
NSData *data = [NSData dataWithContentsOfURL:imageURL];
[self.webView loadData:data MIMEType:#"image/jpeg" textEncodingName:#"utf-8" baseURL:nil];
...you can do this:
NSString *photoWrapper = [NSString stringWithFormat:#"\
<html>\n\
<head>\n\
<meta name=\"viewport\" content=\"width=device-width\" />\n\
<style type=\"text/css\">\n\
body {\n\
margin: 0;\n\
padding: 0;\n\
}\n\
img {\n\
width: 100%%;\n\
}\n\
</style>\n\
</head>\n\
<body>\n\
<img src=\"%#\" />\n\
</body>\n\
</html>\
", URL];
[self.documentView loadHTMLString:photoWrapper baseURL:nil];
Now the image is scaled to the width of the web view, even when the web view is less than half the width of the image, which seems to be a limit that UIWebView imposes otherwise. The image can still be scaled by the user, which I wanted. You can override that by adding minimum-scale and maximum-scale to the viewport meta tag.
Try using html content for WebView, like the following code
<html>
<head>
<title>Title</title>
</head>
<body style='margin:0px; padding:0px;'>
<img src='<your_image_url>'
style='max-width:320px; max-height:460px;'
alt='Your_Image_Name'/>
</body>
</html>
To re-size image use CSS (cascaded style sheet) styling, play with the these style properties in image style attribute
max-width, min-width, width, max-height, min-height & height

UIWebview resize height to fit content

I know this has been asked many times but I can not get it to work. In short my UIWebview pulls in some HTML which has a none fixed height (width always the same), I just want the height to change accordingly.
I have tried a number of fixes I have found online but my problem is the webview will change to the correct size but only for a brief second and then in flicks back to the original size.
I should point out that my this view is invoked by a segue, that is the only thing I can think is different! I am wondering if the code works but when the segue finishes it's crossfade, flip or whatever it then redraws the webview.
Here is my current code (as I say I have tried many fixes including the Java versions most of which do the same), I have also played with scalesPageToFit and srollEnabled plus a few of the ticks in the Storyboard.
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
NSLog(#"Starting Size : %f", headerWebView.frame.size.height);
headerWebView.scalesPageToFit = YES;
headerWebView.scrollView.scrollEnabled = NO;
CGRect frame = headerWebView.frame;
frame.size.width = frame.size.width; // I used this to test, I put 200 in and it changes then flicks back too
frame.size.height = 1;
headerWebView.frame = frame;
frame.size.height = headerWebView.scrollView.contentSize.height;
headerWebView.frame = frame;
NSLog(#"Finished Size : %f", headerWebView.frame.size.height);
}
The logs say;
Starting Size : 176.000000
Finished Size : 246.000000
Anyone got an idea as to why the Webview appears fine just long enough for me to notice and then "shrink" back?
Anyone got an idea as to why the Webview appears fine just long enough
for me to notice and then "shrink" back?
I would say that it appears fine because you are showing the changes as they are happening. Why not hide the web view at some earlier point in the view lifecycle or even in webViewDidFinishLoading? I am sharing my layout settings from IB in case that may provide further assistance. Please advise if this helps or whether additional information is needed. I am using springs and struts rather than auto layout. I would try these method to see if it works for you.
Hiding my web view data loads prevents users from seeing anything until all of my settings/data are in place.
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView setAlpha:0];
[webView loadData:[dataString dataUsingEncoding:NSUTF8StringEncoding] MIMEType:#"text/html" textEncodingName:#"UTF-8" baseURL:baseURL];
[UIView animateWithDuration:0.1 animations:^{
[webView setAlpha:1.0];
} completion:nil];

UIWebView pinch zoom not working beyond a certain limit

I am using a UIWebView to render html content. I have done the following to enable the pinch zoom on the UIWebView:
self.webView.scalesPageToFit = YES;
This has enabled me to enable pinch zoom and scrolling over the content of the .html page being rendered in the UIWebView.
But, there is a limit upto which I zoom in. I have found in the following link regarding the level of zooming in available in the following link:
UIWebView Pinch Zoom
Is there a way we can zoom beyond the limit of 100%?
Is there a different approach we can follow?
EDIT: I have tried setting the minimumZoomScale and maximumZoomScale of the ScrollView property of the UIWebView object, but still, that has not worked out. What could I be missing?
try this using javascript using initial-scale=1.0; maximum-scale=5.0 here set your value
ViewDidLoad method
NSString *embedHTML = #"<html><body bgcolor=#EAEAEA><font face='Myriad Pro' size='3'><meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable=YES'/>";
NSString *endHtml=#"</font></body></html>";
NSString *strDes=[NSString stringWithFormat:#"%#%#%#",embedHTML,YourWebviewDescription,endHtml];
[self.webViewObj loadHTMLString:strDes baseURL:nil];
NSString *string = [NSString stringWithFormat:#"document.body.style.zoom = %f;", fontSizeSlider.value]; // I used sliderControl and its value is 1 to 5.
[webViewObj stringByEvaluatingJavaScriptFromString:string];
When we change the slider position (drag the slider)
-(IBAction)sliderValueChanged:(UISlider*)sender
{
int font=(int)fontSizeSlider.value;
NSLog(#"font %d",font);
NSString *string = [NSString stringWithFormat:#"document.body.style.zoom = %f;", fontSizeSlider.value];
NSLog(#"string=%#",string);
[webViewObj stringByEvaluatingJavaScriptFromString:string];
}

How do I make a UIWebView's content adjust to the iPhone screen size?

I know there a lot of similar questions to this, but I didn't find any that helped me out. I made a webView that displays a url that has a survey on it, but the content isn't shrinking to the size of the screen. Can somebody tell me what I need to write to just get the content to shrink to the screen size, and where I put it? Any help would be greatly appreciated.
- (void)viewDidLoad
{
NSString *website =#"http://www.nameofwebsite.com";
NSURL *url = [NSURL URLWithString:website];
NSURLRequest *requestURL =[NSURLRequest requestWithURL:url];
webView.scalesPageToFit = YES;
webView.autoresizesSubviews = YES;
[webView loadRequest:requestURL];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
The statement
webView.scalesPageToFit = YES;
should size the web page to fit the size of the UIWebView. The user then has the option to zoom in and out of the page. Your problem might be because the webview is not located properly. If your view controller's view fits the screen entirely, add this to your code.
webView.frame=self.view.bounds;
write this
webView.frame = self.view.frame;
it will make the webview to iphone screen size
Try using auto layout:Select your web view in your storyboard then set auto layout to all 4 constraints.

UIWebView disable zooming when scalesPageToFit is ON

Is there any way to disable zooming when Scales page to Fit is ON ??
This works for me:
UIScrollView *scrollView = [webView.subviews objectAtIndex:0];
scrollView.delegate = self;//self must be UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return nil;
}
UPDATE: For iOS 5 or higher get scrollView like this:
webview.scrollView.delegate = self;
Instead of using
UIScrollView *scrollView = [webView.subviews objectAtIndex:0];
scrollView.delegate = self;//self must be UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return nil;
}
You can use this:
webview.scrollView.delegate = self;
-(UIView*)viewForZoomingInScrollView:(UIScrollView*)scrollView {
return nil;
}
Second option is better and full-proof. First logic could fail in future SDKs.
There's property called scrollView in UIWebView. Through it you can define this.
To be more specific it should look like this:
myWebView.scrollView.minimumZoomScale = 1.0;
myWebView.scrollView.maximumZoomScale = 1.0;
Edit:
Implement delegate method
- (void)webViewDidFinishLoad:(UIWebView *)webView
For your web view and in it add folowing code:
[webView stringByEvaluatingJavaScriptFromString: #"$('body').bind('touchmove', function(event) { event.preventDefault() });"];
The problem is this also disable the scroll, because it disable the move of touch.
If you want to keep the scroll you have to write a java script that will overwrite the viewport meta tag with:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
From the Apple Documentation:
scalesPageToFit
A Boolean value determining whether the webpage scales to fit the view
and the user can change the scale.
#property(nonatomic) BOOL scalesPageToFit
Discussion
If YES, the webpage is scaled to fit and the user can zoom in and zoom
out. If NO, user zooming is disabled. The default value is NO.
So if you want to change that behavior, you will probably have to subclass UIWebView.
so it works at me:
NSString *fullURL = #"http://google.com";
NSURL *url = [NSURL URLWithString:fullURL];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
_webView.scrollView.scrollEnabled = TRUE;
_webView.contentMode = UIViewContentModeScaleAspectFit;
_webView.scalesPageToFit = FALSE;
[_webView loadRequest:requestObj];