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.
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.
I have a problem that I've been working on for the past 10 hours (going crazy).
I've been working on a revised version of Walma - which is a collaborative white board written for node.js. I have placed a div header above the whiteboard, and a content area and footer div below it.
This works perfectly on my pc, however when I try to run it on my iPhone I can not scroll down the page to view content. It's like there is no permission to do this- I can not scroll or zoom or anything apart from draw on the canvas.
Notes: I have made the canvas only take up 60% of the iphone screen so that I am able to scroll (as apposed to draw). But this doesn't work.
I have removed the meta tags that you see in the demo.
I have changed the css multiple times with no success.
Is there something I'm over looking? Is there some javascript that's preventing iphone from scrolling that I haven't noticed? I would be incredibly thankful if anyone could point me in the right direction.
Git (demo is linked in the description top) : https://github.com/opinsys/walma
My adaptation : https://dl.dropboxusercontent.com/u/91956067/walma.tar.gz
Many Many thanks,
Joel.
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
What causes the flash of white to the right of a responsive design when changing orientation from portrait to landscape on the iPhone with iOS 6?
Try it on Safari for iOS 6:
Websites like this don't do it: http://html5boilerplate.com
But this one does: http://www.initializr.com
Something to do with re-processing (CPU lag) to fit a wider screen?
It doesn't happen in Chrome for iOS6...
For example, I just removed all img from my own testing site and set the background of <body>, <html> etc. to non-white, but it still happens. This seems to happen with a lot of different websites out there, but others are completely immune to it...
Could it be a problem with someone on the website, or an iOS Safari bug?
Thats because of the elements in the header of http://www.initializr.com/ which (dis)appear when changing orientation. It forces the header to resize and the elements below are pushed down. This causes a repaint of the DOM, that causes the short white flash on iOs.
I have a website that looks fine when viewed in Safari on an iPhone. In iOS3.x you can save it as an icon to the Home Screen and it opens fine.
But in iOS4, while it still looks the correct width in Safari, if you open it direct from a Home Screen icon then it's too wide.
I've spent a couple of hours fiddling with various settings of the viewport meta tag, and CSS tweaks, but no joy. Can anyone see what's wrong, or why it would be different in iOS4 vs iOS3?
EDIT:
I tested it, and something is definetely wrong. I can't help you here, but it probably has something to do with your CSS.
Original answer:
That's because iPhone automatically saves the current zoom level of the website when you create a web-clip to your home-screen. Make sure you zoom all the way out before creating the web-clip if you don't want this to happen.
I looked at your CSS and you are defining the width a set px. Try using "width:100%" in your divs (wrapper, window, main, etc...) instead of a set px. Of course this means you will have to "recognize" the device and send a different css if its anything other than a webview on the iphone.
For now just test the 100%, if it works then you can start to look at redirecting css depending on device that is viewing the page.
Hope this makes sense, if not let me know.
FYI - this is driving me nuts. My homescreen link worked absolutely fine with vn 3 and now it's broken.
I'm sure this is a bug... will respond if/when I figure out a fix.