I'm developing a responsive theme and the issue is all of the pixels are doubled on the iPhone.
I believe this is due to a retina display.
My question is do I have to create an another style sheet ( or using media queries) by giving special values for retina only displays (dividing actual pixel size by pixel density)?
All of the margins are doubled
Border thickness is doubled
Font size is doubled
Currently I have all the margins, borders ..etc. in pixels.
For now, I'm using following java-script to control initial scale and it's working fine.
(function() {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
var content = 'initial-scale=';
content += 1 / window.devicePixelRatio;
content += ',user-scalable=no';
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
})();
Can some one please tell me a solution for this?
Edit:
I'm using <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> too.
<meta name="viewport" content="width=device-width,initial-scale=1.0"> is what you are looking for, combine this with media queries.
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
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 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">
I'm creating a simple mobile website to render specifically on iPhone. I have been researching the viewport setup in order to have the site fixed at 100% So far I have found that the dimensions are
Portrait: 320px
Landscape: 480px
To render the page at full zoom I have used the following meta tag in the html
<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no" />
This works great in portrait, however when the iPhone is rotated to landscape mode the page is not resized accordingly, instead appearing zoomed in.
Can anyone advise on how to correct this behaviour?
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Let's assume your website is wrapped in a container called #wrapper.
We can set the width to 100%, and only allow it a maximum value of 480px. Like so:
#wrapper {
width: 100%;
max-width: 480px;
}
You can also listen to the event that fires when the iPhone's orientation changes, i.e. when you flip the phone.
In HTML
<body onorientationchange="someFunction()">
OR In Javascript
window.onorientationchange = someFunction;