here is the problem! I have a UIWebView in my programs that loads a php page.
The problem is that if the page has a lot of lines i cannot see them.
I can "scroll" the UIWebView but when I leave the finger from the screen the page comes back to the original state.
I don't want to scale pages to fit the view cause if I do that the letters become too small.
I would like to find a way to scroll pages how it is possible in Safari.
Hope i have explained the problem.
Thank you in advance
Antonio
If you have control of the web page, it is easier to control the UIWebView with http than programmatically.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
I would recommend applying the following:
Set scalesPageToFit=YES before the UIWebView gets loaded. I know you don't particularly want to scale the whole thing - but once you can scroll and zoom then having a macro view can be a good starting point.
Set the bounce behavior, within
- (void)webViewDidFinishLoad:(UIWebView *)theWebView {
//turn multi touch on for theWebView!!!
theWebView.multipleTouchEnabled = YES;
//control bounces and bounesZoom for the boundary
[[theWebView.subviews objectAtIndex:0] setBounces:YES];
[[theWebView.subviews objectAtIndex:0] setBouncesZoom:NO];
....
These two things did the job for me.
You should have a look at the scalesPageToFit-Property of the UIWebView.
http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIWebView_Class/Reference/Reference.html#//apple_ref/occ/instp/UIWebView/scalesPageToFit
you can always use
UIWebView *wv = [controller webbrowser];
[wv loadHTMLString:pageUrlToLoad baseURL:nil];
wv.scalesPageToFit = YES;
It does the trick for me.
it will try to fit the entire page in the window.
ADD ON:
write UIWebView in XCode window and pressing the ALT key, double click on it.
it will show the Fast Help window, there you can find projects using that View
click on UI Catalog and when it opens, click the button Open with XCode
select the folder you want to have all the project files and go
select the iPhone Simulator 3.1.3 as the target device and Run the app.
You will get a lot of User Interfaces and all the code they use is right there so you can copy/paste and change to your own way.
give it a shoot!
Related
http://hycroft.com/concierge.html
The text appears quite large at the bottom of the page when viewing it on my iPhone, and I'm really not sure why?
I definitely need to get this resolved as quickly as possible though as my client noticed - and doesn't like!
Thank you VERY much in advance to anyone who can shine some light on this!!
You probably need some meta tags and content that does not have to be a static size. This is an example of one of the many viewport/meta tags you can use in your <head></head> to make a website look good on an iPhone:
<meta name="viewport" content = "width = device-width, initial-scale = 2.3, minimum-scale = 1, maximum-scale = 5" />
But the best thing to do is to check out the Apple documentation:
Optimizing for Safari on iPhone
I have a website based on jQuery Mobile.
I'm using the viewport tag to fit my site to screen size.
So far so good.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
But the Problem is now, that I'm still able to scroll my whole site (the whole mobile safari browser) around the screen.
I tried to set
body {
overflow:hidden;
}
like described in other posts here. But it does not work for me. Anyone an idea how to fix that?
I had the same problem, and ended up using this workaround:
document.ontouchmove = function(event) {
event.preventDefault();
};
Well zooming and scrolling doesn't always have to be related. Your problem here is not with the viewport but with the actual width of your site, if the size is wider than the screen size you will have scrolling issues. You would have to give us a live example so we can help you to find the elements that are overflowing your layout
I compared your site with one of our own. You're using jQuery Mobile 1.0RC1 and we're using 1.0b3. The problem occurs with your site but not with ours.
Maybe try upgrading to the latest jQuery Mobile?
As Jasper pointed out, you have a 404 while trying to fetch these:
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/img/cursors/grab.png (image)
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL2/wp_properties.css?ver=1.13 (page)
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js (jQuery Library)
You look like you have a space in a folder name "jquerymobile-FDL 2", I would rename this without the space.
Also I'm not sure if you can have a meta tag inside the title or style tags, maybe move all meta tags to the start pf your head tag?
http://www.w3schools.com/html5/tag_meta.asp
Also you seem to be importing two different versions of jQuery
http://code.jquery.com/jquery-1.5.2.min.js?ver=3.2.1
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js
So my website sizes correctly on a laptop PC running Windows 7. Howevever, when run on a iPhone or iPad, a couple things happen. Here's a link to my site to see www.mazzoreporting.com
First, the video in the right column extends beyond the main content box. I don't want to change the width because it makes it smaller on laptop pcs. I believe there is some kind of code I can write in my CSS to fix this?
That's it for now. Any help would be greatly appreciated.
Thanks
Chris
you need to make an separate css and load it in case you detect an ipod/iphone/ipad/ other mobile device or better if you can do an excluve mobile version of you page
There is a "secret" HTML incantation that you need to add to the web page to get WebView to resize it. I think that it is:
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=yes" />
(Within the <head> section.)
I have zoom my webview using the following code on the button click event
[webView_ stringByEvaluatingJavaScriptFromString:#"document.body.style.zoom = 5.0;"];
really the webview zoom when i am click that button after few second again webview comes normal state.
Pls help me how to maintain that zoom without resize...
Thanks in advance,
Suresh.M.
Just add this to your html document head
<meta name='viewport' content='initial-scale=5.0'/>
Also, do
[webView_ setScalesPageToFit:YES];
as iPhoneiPadDev stated, if you want the webview to also allow zooming to different zoom level
cheers
try to use this.
[webView_ setScalesPageToFit:YES];
This will help you.
I have seen some write about making a UIWebView editable. I would like to be able to compose a message containing both text and images the WYSIWYG way, and I thought that I might do it with a UIWebView.
Is this a good solution and how do I do this? I have searched the web for examples, but found none.
Thank you
UIWebView content can be made editable starting with iOS 5.0+.
A very nice tutorial can be viewed here: http://ios-blog.co.uk/tutorials/rich-text-editing-a-simple-start-part-1/
The tutorial goes beyond the question, so here's a resume of how to make the UIWebView editable:
//index.html
<html>
<body>
<div id="content" contenteditable="true" style="font-family: Helvetica">This is out Rich Text Editing View </div>
</body>
</html>
//somewhere.m
NSBundle *bundle = [NSBundle mainBundle];
NSURL *indexFileURL = [bundle URLForResource:#"index" withExtension:#"html"];
[webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]];
Anyway, I suggest reading the tutorial, since it shows how to do other stuff as well (changing fonts, colors, embedding images etc.)
You could use the loadHTML:baseURL method from the UIWebView class reference:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html
Place this in the textViewDidEndEditing: delegate method of the UITextView:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITextView_Class/Reference/UITextView.html
Actually UIWebView way is so painful, mobile safari does not support WYSIWYG rich text editor area.
From Zoho FAQ :
I can't create or edit documents on my iPhone, the keyboard doesn't show up when opening iZoho on iPhone. What's the problem?
It is an issue with the iPhone as the safari browser doesn't seem to recognize the rich text editor area and hence the keyboard isn't appearing. This is not an iZoho specific problem as all the applications that use a WYSIWYG editor face the same issue. We hope that Apple will address this issue soon and come up with the next version of iPhone's Safari that supports rich text editing. As a workaround, we may give a plain text editor for users to edit/create their documents if this isn't corrected in Safari's next version.
You should implement rich text editing by yourself :(