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);
Related
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.
Used sample html along with PWA.
Added the app to home screen using safari in iPhone.
In browser whenever there is an orientation change I am able to get the proper window inner height and width, whereas in app that is launched form the home screen icon it doesn't give the changed width and height immediately in the orientation change callback.
Can someone help me with this?
Device: iPhone 12 safari
It seems to be a bug in Webkit browsers:
https://bugs.webkit.org/show_bug.cgi?id=170595
Someone suggest:
To avoid creating a new element, The following workaround seems to work fairly well for me:
For non-Safari, get the layout viewport size from document.documentElement.clientHeight (& Width).
Unfortunately, Safari's documentElement size does not update when the URL bar hides so I couldn't just apply it to all Webkit browser, but this bug just doesn't happen to Safari.
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
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 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