I'm trying to optimize my webpage for mobile browsing, and I'm having problems with iPhone 3GS Safari browser.
It shows the page OK in portrait mode, but when I rotate it to landscape, it just zooms it instead of regrouping.
I've tried meta fixes such as
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
and variant without "width=device-width" options, but they have no effect.
Related
I want my site's width to automatically fit on the iPhone portrait screen (testing on an iPhone 5). I currently have the width CSS set to 100% and am using this meta viewport tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
This technique was recommended by this question: Website does not automatically fit to iphone screen
It doesn't work for me though. The site width is still way wider than the iPhone portrait screen.
How can I get the site width to automatically fit on the iPhone portrait screen?
Make sure the viewport is configured correctly:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
I think you may just be off a little. This is what works for me.
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
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 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.
I am testing a mobile site with 2 iPhones. When I rotate 1 into landscape mode, the text resizes (desired). When I rotate the other into landscape mode, the text does not resize (not desired)
I have tried using the -webkit-text-size-adjust style, but the same behavior occurs
html, body, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
My head tag
<head>
<meta charset="utf-8">
<title>Site</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
Is there some setting that can be changed to always resize text? Should I revisit my meta info for mobile?
Edit:
iPhone1 = iPhone 4 Verizon running iOS 4.2.6
iPhone2 = iPhone 4 AT&T running iOS 4.3.5
Thanks
device-width always refers to width in portrait mode, so width=device-width will scale the viewport in landscape mode. This is a quirk of the iPhone (and I think iPad too). Seems a bit dumb, but this is how apple have done it.
So just use:
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0">
Or better this, which will still allow the user to scale if they want to:
<meta name="viewport" content="initial-scale=1.0">