Posted by timjones on December 12, 2012 at 12:47am
Hi All
I'm using an Omega-based theme (Atlas from Friendly Machine).
Site loads and display perfectly in portrait mode on an iPad, but when I rotate the screen to landscape, it seems to be switching to wide mode (i.e. I can only see a portion of the page). This occurs on all the iPad models. If I load the page in landscape, it displays correctly.
Have also tested it on an Android-based tablet (HP Touchpad running Android), which has the same screen resolution as the iPad and iPad2 (1024 x 768). The site displays correctly if you rotate from portrait to landscape and back again.
Any ideas?
Tim
Comments
Is your site publicly available?
Hi Tim,
Is your site up somewhere where it can be accessed? I just re-tested Atlas on my iPad 2 and it resized correctly. Maybe try viewing the demo site and see if you still have problems:
http://atlas.friendlymachine.net/
Also have you changed anything in your theme settings? I'm happy to help you troubleshoot.
John
John Hannah
Friendly Machine
One more thing...
You might try setting maximun scale to 1.0. It isn't set to that by default, because then people with poor eyesight, etc., wouldn't be able to zoom. But there is a know issue with the scale in the situation you describe. It's not specific to Omega, though. Maybe that would work, but be aware of the trade off for end users.
John Hannah
Friendly Machine
Further testing
The plot seems to be thickening!
The following was tested using an iPad2.
Browser:
Safari -
atlas.friendlymachine.net: rotate from portrait to landscape, display didn't resize correctly
my site: ditto
My site: Uncheck "Scalable by user", rotate to landscape, didn't resize correctly
Set Max scale to 1.0, resize worked correctly (with scalable by user still unchecked)
Browser:
Chrome -
atlas.friendlymachine.net: rotate to landscape, resized correctly
my site: rotate to landscape, didn't resize correctly
Uncheck "Scalable by user", rotate to landscape, resized correctly
Browser:
Opera Mini
rotate to landscape, resized correctly with original settings (tested on iPad3)
The situation for my site to display correctly when rotated seems to be, therefore:
Safari - "Scalable by user" unchecked and Max.Scale set to 1
Chrome - "Scalable by user" unchecked
Opera - works out of the box
Tim
Additional reference
Hi Tim,
So it's not really an issue specific to Omega theme which is why Opera works properly - it's a great mobile browser. Here's a post from StackOverflow that has a longer, better explanation than my previous comment:
http://stackoverflow.com/questions/8095897/trouble-switching-from-portra...
Hope this is helpful.
John
John Hannah
Friendly Machine
Another fix and opinion
This is a known issue with IOS, and there's another article that explains it here: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug.
Addressing this with maximum-scale=1 prevents the user from pinch-zooming if they need to, so it's best not to go this way. However this is the only option Omega gives you out of the box.
There is also a javascript that will fix the issue and gives your users a range of zoomability that helps keep your site more usable. I've used the improved viewport scaling bug fix found here, and it works reasonably well, https://gist.github.com/901295. You would need to add this to your sub-theme and dot info file for Omega.
Remember that you and your testers are the main folks who rotate their iPads back and fourth while reading/reviewing your site, most users will stick with their preferred orientation. The iPad Mini is especially problematic since there isn't a good way to target it in order to bump up the font size for it, so those users will need to do more pinch-zooming with that device.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
Question
Hey Guy's been following the thread and comments regarding zoom, portrait to landscape.
Would you still recommend omega theme for someone who is running a social networking site that is a cross between linkedin and facebook? I thought omega cause it allows for the modifications within regions and mobile aspects.
Would love to hear your thoughts on this.
Omega is Awesome!
Yes, you can change the order and organization of your regions directly from the UI. It's great as a base theme that you can spin off other sub-themes from. It gives you a lot of options, highly recommended for just about anything.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
Thanks Victor for your feed
Thanks Victor for your feed back
Omega
I'm still on the lower part of the Drupal learning curve, but from what I've seen so far, I agree that Omega is a very good base theme to start with.
It's easy to work with and the documentation is also very comprehensive. I can also recommend the themes based on Omega from friendlymachine.net. They look great and the support I've had from John has been very good.
Tim
Culprit seems to be iOS
From the comments posted (especially from Victor,thanks), this seems to be an iOS bug, described at http://groups.drupal.org/node/272853.
There is also a report that it's fixed in iOS 6. If I can convince my wife to let me upgrade her iPad (I don't own one) to version 6, then I can confirm it.
Tim
iOS bug
Upgraded the iPad to iOS 6.0.1. Rotation from portrait to landscape now works correctly with the original theme settings and the three browsers.
So that appears to be the answer.
Tim
Good to know
Thanks Tim.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
So the solution to the
So the solution to the problem was upgrading the IOS? and going with original theme settings?
What if you do modifications to the theme? Will it not work?
Modifications to theme
Setting the Maximum scale to 1 and unchecking Scalable by user will fix the problem, but creates others. The user will not be able to zoom the display to larger text, which could be a real problem for people with vision problems.
I didn't try the Java fix, but if you apply it the change will be lost with an upgrade to Omega.
I'm going to stay with the default settings and live with the consequences until iOS 6 becomes the predominant version. Also noticed that Google maps is now available for iOS 6, so the maps debacle may be fixable.
Tim
Best practice is to not limit user scaling
I wouldn't modify the Omega theme. In D6 with custom themes I've used a script and also just set the viewport meta tag without a max scale. But for Omega simply use theme settings that will allow mobile users to zoom if they need to.
Under Responsive Settings, Viewport Settings, set Initial Scale 1.0, Minimum Scale 1.0, Maximum Scale 10.0, Scalable by user checked ON. The default for Max Scale is 1.0, but this doesn't let you zoom in even if Scalable by user is checked on. Users of older iOS versions can deal with the odd rotation behavior by just pinching in to restore order. More importantly all users will be able to zoom into the page if they need to, and iOS users who upgrade with get the correct rotation behavior just like Android has had all along.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu