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];
}
Related
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
I am trying to display the image in UIWebView and added uiwebiview into the uiscrollview as i wanna give the page controller effect:-
UIWebView *webview_obj=[[UIWebView alloc] initWithFrame:CGRectMake(xcorrd,0,200,320)];
NSString *html = [NSString stringWithFormat:#"<html><body><img src='%#' width='100%' height='100%'></body></html>",imageStr];
[webview_obj loadHTMLString:html baseURL:nil];
webview_obj.scalesPageToFit=YES;
[scroll_views addSubview:webview_obj];
My problem is :-
When i try to load the image of sizd 200X320. the image come in perfect size.but some white portion(approximate 30-40pixel) will added on the bottom and side of the webview.
and automatically the content size get increase and give the scroll.
I am uploading the screenshot for the output i am getting:-
Black potion in the webview part.and white is somehting which get automatically added to the image..
the size of the image i am using is :- 200 :- with and 320 :- height
Thanks & Regards
shweta
Added CSS STYLE in the HEAD tag..
NSString *html = [NSString stringWithFormat:#"<html><head><style>body{padding:0; margin:0;}</style></head><body><img src='%#' width='100%' height='100%'></body></html>",imageStr];
I am creating a webview to display some text in my app.
CGRect frame = CGRectMake(lblContent.frame.origin.x,
lblContent.frame.origin.y,
lblContent.frame.size.width,
lblContent.frame.size.height);
NSString *htmlText = HTML_DIV_TAG;
htmlText = [htmlText stringByAppendingFormat:#"%#%#", _artistDetail.strContent, #"</div>"];
htmlText = [htmlText stringByReplacingOccurrencesOfString:#"''" withString:#"'"];
UIWebView *webView = [[UIWebView alloc]initWithFrame:frame];
[webView loadHTMLString:htmlText baseURL:nil];
webView.scrollView.bounces = NO;
[self addSubview:webView];
This is the set of codes that i put it in to my app.
But need to adjust the height of the web view according to the content size.
If you set webview.delegate = self you can add the UIWebViewDelegate protocol method webViewDidFinishLoad: and invoke a small bit of javascript to determine the height:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *output = [webview stringByEvaluatingJavaScriptFromString:#"document.body. scrollHeight;"];
NSLog(#"height: %#", output);
}
Another method would be to determine the webView's scrollView contentSize in this method, since that should fit the entire website by the time this method is called.
The only problem with this method, is that this method is called when the page finishes loading. Images are handled differently, which means that the webView might change sizes due to images that finish loading.
try -
float height= [iText sizeWithFont:[UIFont fontWithName:#"FontSpecifiedInTheHtmlText" size: -SpecifiedInHTMLText- constrainedToSize:CGSizeMake(320, 100000)lineBreakMode:UILineBreakModeWordWrap].height;
after u get the height of the content text, u can set the frame/bounds of the WebView.
You may want this:
[webView.scrollView setContentInset:UIEdgeInsetsMake(0, 0, 20, 0)];
UIWebview is scrollable. So when you open a page in UIWebview u need not adjust the height according to the content of the page. You can see all the content by scrolling the UIWebView. You should check that user interaction is enabled for your webview.
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
I have a UIWebView which I'm using to display a variety of content, sometimes HTML and sometimes PDF/Powerpoint/etc (which is all seemingly handled by the same underlying control).
What I want to do is harness the underlying UIScrollView (a subview of the UIWebView) to capture the exact perspective of the scroll view and recreate the scroll position in another UIWebView, thus keeping them both in sync.
The problem that I'm having is that the zoomScale property of the UIScrollView is always 1.0 while displaying HTML content (though when displaying PDF content, zoomScale is correct).
I managed to find that the only place where I can get any inkling of the zoom scale of an HTML page is in the scrollViewDidEndZooming:withView:atScale: delegate method. I've found that the atScale: argument seems to provide a relative zoom scale, to what the zoom scale was before the zooming operation began. So for example when zooming in, that argument is >1, and when zooming out it is <1, and it seems to be a relative value between the two zoom scales rather than an absolute zoom scale).
What I've further found is that fundamentally, HTML and PDF content is handled by two different underlying views: there's UIWebBrowserView which handles HTML content, and UIWebPDFView to handle displaying of PDFs.
So in other words, when using a UIWebPDFView, the zoomScale property of the UIScrollView is completely reliable (e.g. 1.0 for zoomed-out, 2.4 for zoomed-in, for example). On the other hand, UIWebBrowserView is much more fiddly, and when asking the UIScrollView for its zoomScale, always returns 1.0, but when receiving the delegate callback, receives a scale value that is a relative value.
So my questions are:-
Is this a bug? (This behaviour is seen on both iOS 4 and 5 from what I've seen).
How can I get both the zoomScale (or some other property/properties) for both HTML and PDF content, and get it in such a way that the state can be duplicated and kept in sync with another UIWebView.
I'm not beholden to using zoomScale, so I'm open to other suggestions for how the scroll state of a UIWebView can be captured and reproduced on another UIWebView.
When loading HTML, and UIWebBrowserView is being used, you can use
zoomScale = 1.0 / webView.scrollView.minimumZoomScale
Of course this is assuming that you can reliably ensure that the minimum zoom of your HTML page is 1.0, since some pages can alter the minimum zoom using the "viewport" meta tag.
Have you tried this?
set scalesPageToFit=YES;
That's the most common way to deal with the problem i think. Setting that enables you to pinch and zoom UIWebView.I don't think you can actually zoom in/out UIWebView without that.
Now the zoom is going to be relative to whatever you're showing on your UIWebView. If it is a big table, it's not so close but it's a good start point if you're going to pinch for zoom in.
This Logic for zooming of UIWebView, no need to add UIWebView on UIScrollView
Well only problem with webView.scalesPageToFit=YES; is, it change initial content font size but I have got other option by my self, Its working very well for me.
Add <UIWebViewDelegate, UIScrollViewDelegate> to your .h file
Creation of your UIWebView.
self.mWebview = [[UIWebView alloc] init];
self.mWebview.delegate = self; /// set delegate method of UIWebView
self.mWebview.frame = CGRectMake(0, 35, self.view.bounds.size.width, self.view.bounds.size.height - 80); // set frame whatever you want..
[self.mWebview setOpaque:NO];
self.mWebview.backgroundColor = [UIColor clearColor];
[self.view addSubview:self.mWebview];
With load HTML file/content.
NSString* htmlString = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"File Name"ofType:#"html"] encoding:NSUTF8StringEncoding error:nil];
[self.mWebview loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
#pragma mark -
#pragma mark - Webview Delegate Methods
- (void) webViewDidFinishLoad:(UIWebView *)webView
{
webView.scrollView.delegate = self; // set delegate method of UISrollView
webView.scrollView.maximumZoomScale = 20; // set as you want.
webView.scrollView.minimumZoomScale = 1; // set as you want.
//// Below two line is for iOS 6, If your app only supported iOS 7 then no need to write this.
webView.scrollView.zoomScale = 2;
webView.scrollView.zoomScale = 1;
}
#pragma mark -
#pragma mark - UIScrollView Delegate Methods
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
self.mWebview.scrollView.maximumZoomScale = 20; // set similar to previous.
}
NOTE: I had to tested on Mac OS X - 10.9.3 with Xcode 5.1.1 and iOS version 6.1 and latter.
I hope this will helpful for you. :)
Unfortunately the only way I found to get the actual scale of the web content in a UIWebView is by accessing to a private member of the UIWebBrowserView : initialScale.
float initialScale = (access to [UIWebBrowserView initialScale])
float zoomScale = 1.0 / webView.scrollView.minimumZoomScale;
float actualScale = zoomScale * initialScale;
I am wondering if this can be done without accessing to private member.
This may be a little late but for those who need to determine whether the current UIWebView contains HTML. A method I wrote to determine this was below. I called this immediately after the webView has loaded
- (void)webViewDidFinishLoad:(UIWebView *)webView {
if (!webViewIsHTMLHasBeenSet) {
webViewIsHTML = [self containsWebBrowserView];
NSLog(#"webViewIsHTML = %#",webViewIsHTML ? #"YES": #"NO");
}
}
- (BOOL)containsWebBrowserView {
BOOL result = NO;
for (UIView * WVSubview in [webView.scrollView subviews]) {
if ([NSStringFromClass([WVSubview class]) isEqualToString:#"UIWebBrowserView"]) {
result = YES;
webViewIsHTMLHasBeenSet = YES;
return result;
}
}
webViewIsHTMLHasBeenSet = YES;
return result;
}
just simply set,
scalesPageToFit=YES for pich zoom on a UIWebView