UIWebView rotation on iPad - iphone

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

Related

My webpage is not responsive on iPhone and iPad. The container moves around and wanders. There is horizontal scrolling and it doesn't stay contained

My webpage at www.rlhismgraphicsltd.net moves around on iPhone and iPad. I've made it responsive and it doesn't move around on desktop but does on iPhone and iPad. The container I made is 100% width and max-width so it's supposed to stay contained within the viewports parameters. The page wanders and scrolls horizontally on iPhone and iPad. I used overflow:hidden and it does not prevent the page from wandering left and right on iPhone and iPad. If anyone has an iPhone or iPad you can check it out. I've opened the page on an android phone and it does not wander. I've inspected the page on Chrome and it doesn't move around like it does when I look at it on my iPhone and iPad. I can not figure out what the problem is.
I thought maybe padding and margins may be an issue but I can't really tell what may work because it is fine when I inspect the page on chrome. Once I look at it on my iPhone and iPad i get horizontal scrolling and it moves diagonally and doesn't stay within the viewports parameters.

UIWebView Rotation

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

Mobile Safari (iphone) Doesn't zoom in when turned horozontally

So I've built a site specifically for iphones that is 320px wide. It looks great in portrait orientation, but there is a ton of white space on the right when it is turned into landscape mode on the iphone.
I'd like to figure out how to make the viewport zoom into view just the 320px in landscape orientation. This way, there isn't a ton of white space.
I suspect it has something to do with viewport. This is what I currently have:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
But that's not working. Any ideas?
Thanks,
Brad

Try removing "user-scalable=no", or define "maximum-scale"
It is preferable to define width (of div's etc') in percentage instead of defined pixels. That way the width adjusts to the size of the screen automatically.
There are many good tutorials on responsive design.

iOS web dev: orientations & choosing image sizes

I'm building an iphone version of a website and was curious of the best practices for choosing image sizes. I'm making a simple vertical column of images text. I originally thought that 300px would be the best size (320px portrait mode minus 10px margin each side). However when user rotates to landscape the images will now seem blurry & upscaled. The alternative is to make the images larger, but then in portrait mode they will all need downscaling- does this make the page load slower? I assumed most people view in portrait.
If I go with landscape/480px as the base size what viewport meta should I use to get it to size down for portrait? My current viewport meta tag is :
<meta name="viewport" content="user-scalable=no, width=device-width" />
Many thanks in advance

iPhone sideways scrolling of a div

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?