I've a problem with a website I'm designing at the moment that when it's orientation changes on an iPhone from portrait to landscape everything scales correctly for the landscape view. But when I go back to portrait, the view is like the below.
It doesn't scale back as it should; like the initial view.
I know this is a known issue on WebKit and a possible solution is explained here but it doesn't seems to be working for me since I've the following meta tag set on my page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I know there are also some JavaScript solutions but shouldn't the above code suffice? What am I missing here?
P.S. this situation is a little bit better on Chrome for iOS on an iPhone again but then again not very well. Chrome properly scales the site when going back to portrait from landscape but it also keeps an unnecessary width from the landscape view for the portrait view as well the when I get back to portrait on Chrome I can move the site horizontally.
Related
I am using angular-ui-grid (http://ui-grid.info/). Version 3.1.1.
When it is displayed on the computer screen, it displays clearly. When I load it on the ipad it looks blurry. I think it is something to do with the retina screen. Is there any way to fix this so that the text in the grid displays clearly?
UPDATE: I am not sure if it is to do with the retina screen. On a Mac with retina display, it seems ok.
I sorted it out. I used the following meta tag on the page and it looks a lot nicer.
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
We have a responsive web site http://www.thinglink.com that is supposed to look just fine whatever the web browser with is. For iOS devices we use viewport metas:
<meta name="viewport" content="width=device-width, initial-scale=1">
Now strange things happen if you rotate iPhone several times:
1. Start with portait. Everything's fine. window.innerWidth is 320px
2. Rotate to landscape. Everything's fine, window.innerWidth is 480px
3. Rotate to portrait. Everything's fine, window.innerWidth is 320px
4. Rotate to landscape again. Page looks zoomed in (and you can pinch-zoom out to normal), window.innerWidth stayed at 320px..
It looks like after second rotation iOS forgot to resize-zoom the page properly.
Why? Has anybody else seen similar issue?
P.S.
For iOS5 devices we also used to utilize https://github.com/scottjehl/iOS-Orientationchange-Fix but it's supposed to be not needed anymore and it doesn't help anyway.
I know this is an old question, but after trying all the proposed methods, nothing seems fit.
Basically, I built this webpage, it looks fine when just loaded with a mobile device, but after screen rotation the size stays the same, (which it should not!)
1:
The first method I tried is adding the meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />
But apparently this does not work
2:
Then I tried window.location.reload
This works! Just perfect. But it basically reloaded the whole page, and all the previous setting will be reset to the default, this is not what I want!
3:
I see someone suggesting writing two sets of css, one for landscape and one for portrait. However, this is a lot of work right?
And, in my css I did not set a lot of explicit height and width anyway. Usually it's default, and sometimes in percentage. Is this a problem?
#
It will be great if someone explain a little what actually happens when the screen rotate? Why elements are not resized properly? And on contrary, why they will be resized properly if a reload event is triggered?
This depends on which mobile browser you're testing on; some mobile browsers, notably IE10, don't report a change in screen size when the orientation changes. However, as you found out the browser does recalculate the screen size when the page is refreshed.
If you can tell us about the browser, maybe we can help more?
My project is located at the following URL:
http://mmhudson.com/test.html
The div and the canvas contained on the document are set to be 480 pixels wide on most devices, but on mobile devices (my iPhone and android phone are the only devices I've tested, but I'm assuming it's pretty much universal) they are 480 pixels on the document, but the document is wider than the number of pixels on the screen (you'll understand what I mean when you look on a mobile device if you don't already understand). The weird thing is it works perfectly fine on a computer.
How can I fix this?
Use a valid DOCTYPE and then
<meta name="viewport" content="width=device-width, initial-scale=1">
The important part is width=device-width.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I am building a web application for iPhone. Since the application shows different content while in different orientations, the built-in animation between the two orientations animates the original content as well.
For better result, I would like to disable the animation between the portrait and landscape. Is there a way to do it for web app?
I have checked the <meta> tag but there is not a relevant one.
Thanks for any help!
Felix
I don't think this is possible. The only option there is for handling orientation in using viewport.
From the documentation (found here: http://developer.apple.com/safari/library/documentation/appleapplications/conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Dashcode_UserGuide.pdf), it states:
Viewport
The values in this section control how users can view
your mobile Safari web application
when they use it on iPhone or iPod
touch. When users change the device
orientation from portrait to
landscape, webpages can get scaled to
fit the new screen orientation. The
two options for the Orientation value
are:
“Adjust page width to fit.” When you choose this option, your web
application resizes (that is,
increases or decreases in width) when
the device orientation changes. This
option is generally recommended for
mobile Safari web applications,
because it enhances the user’s
perception of the web application as a
standalone application and not a
webpage.
"Zoom page to fit.” When you choose this option, the width of your mobile
Safari web application does not change
when the device orientation changes,
but the scale does. In other words,
the content of your web application
will appear a bit bigger. You might
want to choose this option if your web
application has a complicated layout
that you don’t want to change in width
when the device orientation changes.
An example:
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1.0">
Br,
Paul Peelen