Question: what might be the cause of the iframe not working properly only on IOS, iphone?
It seems like it's zooming in automatically, but that is not the intention
How can this be fixed?
Sounds like the viewport issue to me.
I've seen this before... Here is a solution that might work for you in this case.
<meta name="viewport" content="width=device-width, user-scalable=no" />
Add/modify this tag in your and let me know if it works.
Note that by doing this you will be removing the option for the user to pinch and zoom on your site. Most the time you don't have to care about that but some users depend on the functionality.
Related
My bootstrap pages are designed responsively. The viewport is stated as required:
`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
(without the backticks)
In browsers I tested (Safari, Chrome, Firefox), the responsivity works well.
However, iPhones and other smarthphones always show the desktop view.
What am I doing wrong? This is a test page for you to see (sorry it's still a little cluttered):
http://zhaw.warnez-services.ch/NaKt/stackoverflow.php (LINK UPDATED)
Interestingly, using a Cloaking service, they send their own head and suppress my viewport instructions.
Thank you for any hints.
Viewport tag is not yet added.
Add <meta name="viewport" content="width=device-width, initial-scale=1.0" /> inside the <head></head> of your HTML/PHP.
The problem is/was the cloaking service. (nic.ch.vu).
It allows to hide the real address and camouflage it with a free and custom one.
If you choose the cloaking option, the address you typed in the address bar will never change, no matter what you click.
These services sent their own head sections, and the viewport tag gets suppressed for some reason.
If you run into the same problem, you must disable cloaking or use the real address.
Thanks to all posters for their help!
Well, seems that page you provided is missing the meta - viewport tag in its source.
your meta Tag is correct, uhmm i see you only have one css link ""... Question is it repressive? If not check out these tutorials on reponsive design helped me as well.
http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/
http://getbootstrap.com/css/
Hope that helps
I have put this tag in the head of a webpage:
<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">
For some reason, it simply seems to be ignored on my iPhone, even adding user-scalable=no has no effect. I have tried many values of width, initial-scale etc... nothing seems to have any effect.
Does anyone know what might be causing this? I can see clearly in the source that it is there in the header.
My iPhone is on iOS7.
Edit: The problem is still happening on iOS6 with the xcode ios simulator, so I don't think it is due to iOS7.
It is working! On your page you are using:
<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">
When I open the page on my phone (ios7 iphone5) I see exactly the right result.
Are you 100% sure you really tried putting the following in your code?
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
It doesn't get ignored.
UPDATE1
I just saw that in your code it seems you are using my second viewport but i gets changed probably by javascript to the 640px viewport. Thats maybe the reason why for you it feels like it gets ignored. Because during runtime the viewport gets changed...
UPDATE2
Ok found the problem.
function updateWidth(){
viewport = document.querySelector("meta[name=viewport]");
if (window.orientation == 90 || window.orientation == -90) {
viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
}
else {
viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
}
}
Your page is calling this function which overrides your viewport. Did you know about that function?
I know this is a hella old question now but it was the first result in Google when I had this issue so thought I'd update in regards to iOS 10.
It seems Apple now completely overrides the user-scalable=no in iOS 10 in order to improve accessibility
See: Thomas Fuchs' Twitter Post
You should try, as a workaround, the following code:
html {
zoom: .8;
}
Viewport width is different in many devices. iOS has 320, android has 360 in portrait mode. Landscape mode - it depends on which device you have, you will get a different pixel value.
The best way to make website optimized for mobile device is to set width=device-width. If you don't set initial-scale=1.0 - iOs will zoom in (enlarge) screen when changing device rotation.
This is the meta tag you need.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if you wanted to disable the zoom feature, set user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Do not hard code width property as it will set same width for portrait and landscape modes - which is very unpleasing user experience.
Best documented: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
About iOs 7
Moreover I would say - dont worry about iOS7 as of now. It has so many bugs. Read here: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/
It seems that ios7 is not recognising the meta tag properly.
Here are the links which may help you.
webapp not scaling properly in iOS 7
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Use below code.
<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
It works well in many of mine project.
I'm using meta tags to scale a site.
It's for a demo on an iphone, so best practices can be ignored.
For some reason the scaling does not seem to change when I change the page from landscape to portrait. (I'm not talking about switching while rotating, I'm talking about full page reloads in a different orientation).
I'm testing the site in the iPhone simulator.
Am I missing something simple?
<meta name="viewport" content="width=320; initial-scale=.675">
<meta name="viewport" content="width=480; initial-scale=1">
Why are you using two viewport tags? These are not if-then statements; you should set the viewport value once. As it stands I would expect the second one to override the first (though really, anything can happen).
Also don't confuse width with device-width. Might help to reread http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
I am currently working on a Html 5 WebApp. The entire app works perfectly fine, with the exception of scalability (Zooming). I have placed the following Meta tag on my WebApp's page,
<meta name="viewport" content="user-scalable=yes; width=device-width; height=device-height; initial-scale=1.0;" />
After much research I have come to the conclusion that these Meta tags are primarily for the iPhone version of safari. However, the problem that I am experiencing is, while an iPhone user is on my site, previous to bookmarking the WebApp to the home screen, the user is not able to zoom in or out (using the pinching motion). The only way that that seems to create a zooming in effect, is if the user changes the orientation of their phone.
I have tested this meta tag with both an Apple device, and an Android device. The Android device disabled zooming when user-scalable = no, and allowed zooming when user-scalable=yes, while the Apple device never allowed zooming in either of the two testing cases.
My Questions Are:
Are these Meta Tags primarily designed for iPhone Safari browsers?
Am I correctly using the above Meta Tag?
If I am not, What is the proper way to use the Meta Tag?
Thank you for your advice in advance!
I could be wrong, but I don't think you need the user-scalable line at all. Have you tried removing that and seeing what happens? Something like this is usually sufficient:
<meta name="viewport" content="width=device-width" />
… and then maybe tweak from there. If you do want to use all the attributes, try separating them with a comma rather than a semi-colon. For example:
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
Does anybody have any idea why iPad zoom (you know, where you use two fingers to enlarge the text/screen) does not work on some sites?
For example:
facebook.com
c3.arc.nasa.gov/nex/ ± the site that I'm working on.
Google search does not reveal anything, which makes me think it’s not a common problem.
Thanks beforehand for any insights.
This lack of zooming is by design; the website has chosen to disallow zooming. It's done with the viewport meta tag. For instance,
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
prevents zooming.