I am designing a mobile website and when I see my website in portrait view on iphone/ipod its layout, images everything is perfect but when I change to landscape view everything is showing a little bit zoomed-in. I have tried all the meta tag (viewport) attributes:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />
What am I missing? I want to continue to allow users to zoom, I just don't want the orientation change to zoom my content in.
The guys behind jQuery Mobile have a solution to this. It works by checking the accelerometer data and disabling zoom while the device is changing orientation.
Related
I am developing an iPhone App based on a UIWebView (hate it or love it). This page has a fixed width and pretty much static proportions. I have a few input textfields on this page, but whenever a user engages focus on one of these, the iPhone will zoom a bit in. Also, I can pinch-zoom on the web view.
How can I avoid that? I have Scaling: Scales Page To Fit and View Mode: Scale To Fill.
Thanks in advance.
You can try disabling it in a meta tag, like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
It is working for me
webViewHome.multipleTouchEnabled = NO;
And Change wkwebview property set "Aspect Fit " from "Scales to fill" in storyboard.
I have a horizontal site and I want the site to always be 100% in height when viewed on a mobile device. I have set the viewport meta tag to -
<meta name="viewport" content="height=device-height, user-scalable=no">
which works fine on both portrait and landscape mode, however when I rotate the phone from portrait to landscape mode the site scale bigger than 100%. Unless I re-load the page (refresh won't work).
I found this link which explained why it does that - http://filamentgroup.com/examples/iosScaleBug/
and followed the instruction there and changed the meta tag to
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
This solved the orientation problem when switching from portrait to landscape mode but it doesn't scale the site to 100% height.
It's okay to disable the zoom functionality because I prefer to have zoom off.
Any suggestions to solve this problem?
Thanks
I know this is an old question but when trying to achieve what you are I tend to use the following code.
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
Hope that helps
When I change the orientation of my iPad from the portrait to landscape mode my page looks zoomed.
Currently I am using this meta tag in my site
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0;">
This allows me to zoom my site on iPad and iPhone but has the zooming problem in orientation.
So I tried using the below mentioned meta tag, here I am not getting the orientation problem but not able to zoom my site.
<meta name="viewport" content="width=device-width, user-scalable=1.0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0;">
And I tried all the things which are mentioned in the link. Nothing is working for me.
This is a Mobile Safari bug. It was a broadly known issue and has been corrected in iOS 6. Use your previous meta-tag and you should be good now.
http://filamentgroup.com/examples/iosScaleBug/
Also, I strongly advise against using maximum-scale=1.0, specially for tablets. This is bad for accessibility, and, quite frankly, an annoying feature.
I'm developing a mobile website for iPhone and Android browsers.
As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites gets wider.
My current viewport (I already tried setting a fixed width of 320px):
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Now my question: Is there a way to make the Android Webkit browser "zoom in" like an iPhone on orientation change from protrait to horizontal?
Thank you very much in advance!
Andrew
This functionality is present on iPhone because of the way the viewport works. Here is how to disabled it on all devices and thus creating the same user experience.
If you set your viewport to this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0," />
then it will prevent the iPhone from "re-zooming" back to device-width. This ALSO disables zoom entirely though. Don't have a better solution at this point.
Some mobile web sites such as the BBC mobile website stop you zooming in on the main home page on an iPhone - how is this acheived. Is there a directive that has to be included in the HTMl code or something ?
You just need to tell the iPhone not to let the user zoom, with a meta-tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This should still let your webpage rotate, but not zoom.
It's because the width of the site is set to the native resolution of the iPhone display. Mobile Safari never actually zooms past 100% on any site, on a standard sized site say (1000px wide) it is zoomed out to begin with and you specify the zoom level when double tapping or using the pinch gesture.
To achieve the same effect use a max width on your site to match the resolution of the iPhone which is 320px.
In CSS this would be done like:
div#wrapper
{
width: 320px;
}