How to make UIWebView increase font size when pinch zoom?
If I set scalesPageToFit = YES, pinch zoom will zoom the web page, but the width will be larger than device width. I want the width to be still the device width, but the font should be larger.
There is no pure objective C way that can let you achieve this. However you can use some JS trick to increase the font size only. Try using:
//determine current "fontSize" with the help of some pinch gesture recognizer
NSString* contentHeight = [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:#"scaleFont(%d)",fontSize]];
webView.scrollView.contentSize = CGSizeMake(webView.scrollView.contentSize.width, [contentHeight floatValue]);
And in your html page, create a JS function similar to the following one:
function scaleFont(fontSize) {
document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust=fontSize;
return document.documentElement.offsetHeight;
}
You would still need to determine the intended fontSize in your objective-C code through some pinch gesture recognizer or something similar. Please also make sure to disable default zooming functionality of the UIWebView using scalesPageToFit = NO; and removing/disabling any "viewport" meta tag in your html doc.
Hope it helps.
Related
I am now doing a advertSDK project like inmobi, the user is allowed to create the banner frame and locate them by CGrectmake, so I will create a UIWebview as they required, then in the UIwebview I just to load the html content to show it in the right position.
The question is: the banner content has a fixed size : 360 * 100, however in iphone 6s simulator, it is too small, I tried to set
webView.scalesPageToFit = YES
but it has no effects.
Anyone has a good idea to solve the problem? Thank you.
You have to use the UIWebView delegate methods and resize the web view like I'm doing here:
- (void) webViewDidFinishLoad:(UIWebView *)webView {
webView.frame = CGRectMake(webView.frame.origin.x, webView.frame.origin.y, webView.frame.size.width, webView.scrollView.contentSize.height);
}
So what I am after is a way to put a UIButton on top of a UIScrollView and a UIWebView under it. The reason I want it this way is that I need the button to "scroll away" as the user scrolls the page I load into the UIWebView.
In order for this to work, I need to get the height of the content of the web page I load and then set the height of the web view to match this. If I can do this, I then intend to set the contentSize of the UIScrollView to match the heights of the button and web view.
I understand that somehow this is supposed to happen in the - (void)webViewDidStartLoad:(UIWebView *)webView method, which is confirmed on many threads on stackoverflow (for example this one). I also know that Apple says you shouldn't put a UiWebView in a UIScrollView, since the scrolling actions may interfere. Disabling scroll for the web view should avoid the problem though.
There are many threads discussing this matter, but none of them seem to work for me. Can it be because I am running on iOS7?
I am in big desperation here, help is much appreciated!
You can get height using following code :
NSString *heightStrig = [webView stringByEvaluatingJavaScriptFromString:#"(document.height !== undefined) ? document.height : document.body.offsetHeight;"];
float height = heightStrig.floatValue;
complete code :
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
CGRect frame = webView.frame;
NSString *heightStrig = [webView stringByEvaluatingJavaScriptFromString:#"(document.height !== undefined) ? document.height : document.body.offsetHeight;"];
float height = heightStrig.floatValue + 10.0;
frame.size.height = height;
webView.frame = frame;
}
You can get the height of the content loaded into a UIWebView as follows:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
CGFloat contentHeight = webView.scrollView.contentSize.height;
}
And then adjust the frame of the web view accordingly.
I use a UIWebView in my app to present content, but now I can't do it anymore because I also need to use a UIScrollView and it creates conflicts related to scrolling.
Also, UIWebView is very slow.
So my question is : is there any another way to load string which contains HTML tags (strong, p, div, and etc...)?
UPDATE (improved explanation)
I have UIVIewController containing an image at the top, and under this image is a title and under the title is content (HTML string from web). The problem is that when the text is too big, the webview is scrolling, but not the whole page. I want the whole page to scroll, not just the webview.
You won't get anything faster or better than the native UIWebView. Probably you should overthink your UI/UX. What exactly do you want to achieve with a webview in a scrollview??
Perhaps attributed strings are enough for you. Look it up.
The OHAttributedLabel even parses HTML for you.
Solved.
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *output = [webView stringByEvaluatingJavaScriptFromString:#"document.body.scrollHeight;"];
int webViewHeight = [output intValue];
//NSLog(#"height: %d", webViewHeight);
if(webViewHeight > 220){
CGRect frame = articleContentWebView.frame;
frame.size.height = webViewHeight;
articleContentWebView.frame = frame;
int scrollViewheight = 416 + (webViewHeight - 220);
[articleScrollView setContentSize:CGSizeMake(320, scrollViewheight)];
}
}
In delegate method webViewDidFinishLoad I calculate height od UIWebView content and then set height of UIWebVIew and height of UIScrollView.
I am new to iOS development and I am developing an application which will show and web page in UIWebView. I want to get rid of the default zoom-in and zoom-out functionality of the webview.
This is in the Apple Documentation:
#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.
Interface Builder Approach:
Make sure that the "Scale pages to fit" tick box in the right-side column of the interface builder when you click on your webview is un-ticked. It's right at the top.
You're also going to need to un-tick the box that says "Multiple Touch" around half way down. That will disable pinching to zoom.
Code Approach:
You can also do it programmatically with this code:
webView.scalesPageToFit = NO;
You're also going to want to add:
webView.multipleTouchEnabled = NO;
That will disable the ability to pinch and zoom, since it disables the ability to use multiple fingers in an action, and pinching requires two, obviously!
set the UIWebView property scalesPageToFit to NO, will disable the user zooming
myWebView.scalesPageToFit = NO;
One simply needs to do:
myWebView.scalesPageToFit = NO;
and also disable the pesky pinch to zoom:
webView.multipleTouchEnabled = NO;
For me the ideal solution was, surprinsingly, in the html side only. Just add this in <head>:
<meta name="viewport" content="user-scalable=0" />
I don't recommend to use webView.scalesPageToFit = false because it brings issues like making everything 4x bigger. I also did not use initial-scale=1.0, maximum-scale=1.0 nor minmum-scale=1.0
UIScrollView *scrollView = [webView.subviews objectAtIndex:0];
scrollView.delegate = self;//self must be UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return nil;
}
try this ... It works..
Disable bouncesZoom of the scrollView will solve your problem. Give it a try!
webView.scrollView.bouncesZoom = false
When inheriting from UIWebView you can implement. (Works from iOS 5, lower not sure)
- (UIView *) viewForZoomingInScrollView:(UIScrollView *) scrollView
{
return nil;
}
Try this:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return nil;
}
Swift Solution
Simply set the value mentioned above to false: webView.scalesPageToFit = false
To add to the answers, this will work:
webView.scrollView.multipleTouchEnabled = NO;
i am also struggle at first when i use webview scroll event after that i fond the below code for disable the scroll in webview and this also remove the multitouch gestures function in that particular webview.
[[[theWebView subviews] lastObject] setScrollEnabled:NO];
here theWebView is the name of my UIWebView..
use this code in webViewDidFinishLoad function ,,, its really helpful to me,..
Am currently developing an iPad app which uses a UIScrollView. The UIScrollView is populated with UIImage(s) and all the images are larger than the iPads width, twice the width, 1536px. What I would like it to do is when swiped/flicked it will scroll to the second image, i.e. 1536 and the third image to 3072 and so on. Its just to see a quick image when sliding across. I've had a look at scrollViewDidEndDragging but it gets really nasty and jumpy at times.
Is there a way of setting the animation to scroll by 1536 each time apart from the last UIImage in the UIScrollView? I know you can use setContentOffset but if I use this in the above method it doesn't work as its using the current transition still and therefore making it very jumpy.
Edit
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"cocktail_%d.png", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.width = kMainImageWidth;
rect.size.height = kMainImageHeight;
rect.origin = CGPointMake(xpos, 0);
imageView.frame = rect;
[mainImgScrollView addSubview:imageView];
[imageView release];
xpos += kMainImageWidth;
}
Edit
All I needed to do was make the UIScrollView 1536px wide and it worked. The app will have 6 images to start with and more in the future. Hopefully there won't be a memory issue to start with?
Thank you for your help.
The page size is the UIScrollView size. It is perfectly acceptable to make the UIScrollView itself larger than the width of the iPad screen. If you make the UIScrollView 1536px wide, then each page will be 1536px wide.
To allow the user to scroll around and see each picture, what you want is a scrollview containing a row of scrollviews. The outer scrollview is the one in the window, it is 1536px wide, and it is just for paging. The inner scrollviews are the width of the screen and they have their contentSize set to the image size so that the user can scroll around in each one and see the image.
(However, you're going to want to rethink your architecture, since an app into which you have predrawn multiple images 1536px wide will not run (because it will exceed the available memory for the device). The WWDC2010 videos include an excellent talk on this very topic, i.e. how to design a paging scroll view that lets you page from image to image.)
I think you want to turn on paging on your UIScroll view. This will make it "snap" to the width of the scroll view. It will behave like the home screen on the iPad/iPhone does. You may need to make your scrollView's frame wider than the screen also to get the paging effect correct. You may encounter some lag no matter what due to the size of your images.