I have a UIWebView in which the user can browse a bunch of locally stored and interlinked HTML files. All works nice and well, except in this particular case:
User navigates to a page with a fragment pointing to chapter 3, causing (correctly) the browser to render the HTML from the fragment anchor and onward.
User scrolls a bit further down, say to chapter 4.
User rotates the device to landscape.
The UIWebView now jumps back up and shows chapter 3.
So my question is: Is there a way to make UIWebView display the users last location in the document, even though the user scrolls and/or rotates the device during browsing?
I imagine the reason for that is, the scroll stays at the same pixel position, instead of proportional to the page height. So, when the user has the device in landscape, the page width increases and the page height decreases.
You may want to use JavaScript to scroll the page proportionally when orientation changes, i.e. use [webView stringByEvaluatingJavaScriptFromString:]. Here's the pseudo code:
Just before orientation change:
int oldVerticalPosition = vertical scroll position form the top of the page
int olePageHeight = the height of the whole page
After orientation change:
newPageHeight = the height of the whole page
Scroll the page to newPageHeight * (oldVerticalPosition / oldPageHeight)
This page gives some sample code.
Related
I am using a UIWebView in my app and when I rotate my iPhone the webview rotates along with it, works just fine. However, you see the corners of the background view behind my webview as it rotates and it can look a little flickery when rotating.
So I went and tried Safari on my iPhone, using the same website and it different. In Safari if I rotate, its far smoother, I can also see it zooms slightly.
For example, I am on Apple's homepage in portrait mode, fully zoomed out to see the whole page. I rotate to landscape and the contents zooms, as far as I can observe this is why it looks smoother.
So, my question, how can I achieve this in my app?
I have played with the 'Scales Page To Fit' option but had no success.
Currently:
Rotating scales the webpage to fit the view. (Whole page is zoomed out to be seen).
Required:
When rotating, rather than rescaling the page, just let it zoom as required.
Don't know if this will help you, but you might find it useful to change the background color (or even background image) of the view behind your webview, which might mitigate your issue with seeing the corners.
If you haven't found a solution yet... As an alternative you could try refreshing the webview, if you notice that the device has rotated, refresh webview and webkit should renderize it again, also play with the HTML meta viewport tag (initial zoom, scale, etc.) and CSS media queries to support different scales. As for the HTML document, try using em, and pt units in CSS rules.
//reload webview
[self.webView reload];
link Orientation Notifications
hope this help in something
Here are some steps to mess up the iPhone's rotation when in Safari
Holding the phone in vertical mode and navigate to google.co.cr with Safari
Rotate the phone horizontally
Rotate the phone vertically
The page is clipped as seen here:
A simple horizontal swipe will bring it back.
This is not a problem with google.com, only with google.cr.co, but it illustrates the problem I am having.
Oddly enough, if you do the search from the Google Search box in the Safari Header, this resizes back to normal.
My web page has the same problem when following the same steps... it gets clipped.
How can I fix this?
Simply reset the viewport on orientation change.
window.addEventListener('orientationchange',function() {
if(window.orientation === 0) {
window.scrollTo(0,0);
}
},false);
On the iPad, I present a view in the "detail" side of a split view controller that is basically just a UIWebView, which loads an HTML file in the application bundle. The application supports rotation and hides/shows the "master" side of the split as appropriate.
When the UIWebView is initially loaded in landscape mode, its content seems to be "sized" properly... the content is taller than the screen, so you can scroll vertically, but not horizontally. (The HTML content is nearly all text styled with CSS, with only a small ~300x50 image at the bottom.)
If you then rotate the screen to portrait, the HTML content still seems to be sized okay -- vertical scrollbar is present, but not horizontal, as it was initially. Rotating back to landscape and everything is still peachy.
So far, so good.
Now, if the UIWebView initially loads in portrait orientation, everything is also "sized" properly (vertical scrollbar, no horizontal). But, if you rotate it to landscape, the content suddenly gets a horizontal scrollbar, because one of the paragraphs of text is wider than the width of the UIWebView. (Not coincidentally, I'm sure, but that long paragraph is sized perfectly for the slightly larger width the UIWebView has when it's oriented as portrait.)
I was expecting/assuming that rotation of the iPad would cause the UIWebView to have its frame be resized, and when it's resized, to also resize its HTML content appropriately. (Think of taking a Web browser window and shrinking it.) Why isn't that happening for me?
I would like to avoid using the "Scales Pages to Fit" property because the text shrinks non-deterministically.
Just solved my issue with this by adding this HTML5 Viewport meta tag:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
to the head section of my HTML, maybe a variation of this meta tag may help?
Although my issue was triggered when my app was started in landscape mode, while yours in portrait mode, it may be a common cause.
I also had another funny issue with the webView in iPad and the common solution seems to be that meta tag:
iPad Simulator WebView/Google Maps API Issue
It's also possible to deal with this by putting
[myWebView reload];
into the shouldAutorotateToInterfaceOrientation method
-- but if you're on a 3G connection this can be slow
I am coding a website for iphone.
Some of the content (images and strings I have no control over) is too wide to fit in the 320px viewport. When I first encountered this, it caused the entire page to revert to web page view (scaled small text).
So, I put the wide images in a div with CSS style="width:320px; overflow:scroll;" This stopped the page scaling but I assumed I would be ale to scroll that div horizontally to see the rest of the images (like the app store does with screen snaps). However, the scrolling just doesn't work on the ipod. (It does work on Safari in default Mac mode but not in Safari as iPhone User Agent.)
Anyway, how can I get the sideways scrolling on the ipod?
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16
Scroll with 2 fingers?
I need to use a website with quite a bit of content in my App via UIWebView.
When I scroll the page in Mobile Safari everything scrolls smoothly. Even if I scroll fast - the grey squared background appears but is rendered properly after a few moments (less then 0.5 seconds).
The same page in UIWebView scrolls jerkily if scrolled fast and doesn't show the grey squared background.
I guess Mobile Safari shows the grey squared background first and renders after that while UIWebview stops the scrolling until the part which will be shown is rendered.
How to I tell UIWebView to behave like Mobile Safari?
It is already being drawn on it's own custom tiledLayer. The problem is that it is by default attempting to draw itself on the main thread so it locks up when I can't be drawn. There is a private message you can call
-(void)_setDrawInWebThread:(BOOL)arg1
That will work BUT you will see empty space when you scroll too fast and it can't keep up with the drawing until it has time to catch up. They use:
-(void)_setDrawsCheckededPattern:(BOOL)arg1
in mobile safari to help with this.
Found a better solution. CGTiledLayer.
http://developer.apple.com/mac/library/documentation/GraphicsImaging/Reference/CATiledLayer_class/Introduction/Introduction.html