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
Related
I have this annoying problem where Safari Mobile rotates the pictures I take with the phone camera. The weird thing is that it only happens while in portrait mode.
Here's a code sample: http://jsfiddle.net/Kazpp/
As you can see I'm adding the image as background of the preview div and setting the background-size property as cover so I can keep the image aspect ratio and fill the whole div area with the image.
I also tried adding an image element as children of my div, but that didn't worked either.
Does anyone have any clue on what's going on here?
Ps.: I'm having this issue on iOS 6.0. Didn't tried another iOS version.
You're running into an Exif orientation issue JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
As answered in that post you can use this library to check image orientation and rotate accordingly https://github.com/blueimp/JavaScript-Load-Image
I have a view with a UIWebView on half the size of the iPhone screen.
In this webview I embed youtube videos.
The app is only in portrait mode. Though I would like to see videos play also in landscape.
Now I want the following behaviour:
When in portrait, play inline, don't go full screen.
a. For that I use "webView.allowsInlineMediaPlayback=YES;"
b. I open the webview with this link: "www.youtube.com/embed/videoid?playsinline=1"
If the user rotates the screen to landscape, I'd like the video to go full screen.
If the user then rotates back to portrait, I'd like the video to get inline again.
The rotations shouldn't stop the video in the middle, or restart the play.
What should I do?
As the embedded videos use an undocumented MPInlineVideo(Fullscreen)ViewController, you can't use its API and switch to fullscreen.
I'd thus recommend playing around with the "allowFullScreen"-parameter for the iframe-tag.
If everything fails, you should always be able to change the frame-size of the web-view so that it covers the full screen. You'd have to use width/height 100% in the iframe then.
Disclaimer: This is an educated guess. I've not actually tried to implement it that way.
I've started working on a mobile page and I've made the css so that the page can expand or contract and look fine. When I rotate the page though, by turning my iphone sideways, instead of resizing as though there is a new screen size (wide), it's zooming in. I have an image on the page and I really don't want it to zoom in, because it pixelates the image. I would rather it resize as though it was a new page.
You can see it here:
http://scclib.com/mobile
I figured it out by adding this meta tag, I haven't tested it on android or ipads, but this at least solves my problem for iphone.
I have a big webview in my iPad app and scrolling performance seems to be a big issue, especially the first time you browse the webview. In mobile Safari, the scrolling is extremely smooth and the page simply appears as a transparent checkerboard pattern and loads in as it comes into view. From what I've read, the way to handle this is using CATiledLayer, but I have no idea how to implement this. Can anyone point me in the right direction? Thanks!
A UIWebView should already do its own tiling behind the scenes. There's no way to manually back a UIWebView with a CATiledLayer that I'm aware of, due to its complex rendering architecture.
If you create a UIWebView that is only the size of the display, the only reason I could think of for slower scrolling than Mobile Safari would be other overlaid views that need to be composited on the web view when scrolling.
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