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" />
Related
I designed an app on a resolution of 640x960px which I am now converting into a working webapp for an iPhone 4S. As you may know, the iPhone 4s has got a resolution of 640x960px.
Why is it that when I use width=device-width in the meta viewport, which shouldn't downscale or upscale the design, the iphone uses a width of 320px instead of 640 pixels?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
However when I use width=640 it forces the browser to use 640px as the width but that doesn't automatically change the width for other devices such as an iPad. This just doesn't make sense to me.
content="width=device-width"
will not scale up anything.It only changes the viewport's width. It seems the iPad is dumb in such cases as it thinks of width in device-width as 768px in landscape mode too.
In landscape mode setting a specific pixel value for iPad will scale it up 1.333.
Use this and couple it up with responsive layout techniques
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, what you are doing is correct. Just add specific code for layout. Made my life much easier.
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
I have built a website that I thought was free from css errors until I test this on the iPhone. I have a strange problem in that the repeating background images do not stretch fully across the page.
This is what it looks like on an iPhone and full website URL:
Example website
Try this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The problem is the same for if you reduce the width of your browser. The problem is the background IS stretching, but the website is only as wide as the stretched background image. The slidey bit below the logo has a fixed width though and is creating the illusion that the background isn't stretching far enough.
The above code should fix this issue by making sure that the website zooms to fit the width of the browser.
Turn off auto-scaling by setting a viewport meta tag to the head section of your HTML. This sets the width of your page to match the width of the display,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Sadly adding the viewport to set the zoom to 100% was not what I was looking for.
After debugging further I found that the problem was being caused by the large banner image at the top. This was a larger width than the rest of the website, by changing this to a centered background image and adding overflow hidden to the container fixed all issues.
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">
I am displaying some content in a UIWebView on both an iPhone and an iPad (same content, two different apps). On the iPhone, the content fills the entire 320px in width, but on the iPad, it does not - it seems to only be about 240px across.
I don't have control of the content, but I did find this in the source:
<meta name="viewport" content="width = 320" /><meta name="viewport" content="initial-scale=1, user-scalable=no" /></head>
Can anyone suggest why this wouldn't be working on an iPad app, and if there's anything I can do about it without being able to change the HTML? I'd rather not manipulate it through javascript either, if possible.
I'm not sure exactly what is going wrong, or what effect you are trying to achieve, but I usually use a tag like this in my UIWebView-based views:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">