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" />
Related
I am in the process of improving the accessibility of a web app, and one of the critical issues I have identified is the presence of user-scalable=no and maximum-scale=1.0 in this tag:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
I understand why these attributes are an accessibility concern, and would like to remove them, but would like to test the "before and after" effects of the attributes and the lack of these attributes. However, I am having trouble figuring out how to test. My understanding is that the presence of these attributes will prevent a user from e.g., zooming the page, enlarging fonts, etc. However, in the app in question, they don't appear to have any effect on these things: I am able to zoom, enlarge fonts, etc. on both mobile and desktop in Chrome and Safari.
How can I go about testing the affects of user-scalable=no and maximum-scale=1.0 so that I can resolve any issues that removing the attributes might create?
I have designed a fully responsive web page using Reactjs on the browser, but when I opened it on a real phone, there were things that are "off", although I designed it on the browser for the same phone. Why is that? I have that meta tag <meta name="viewport" content="width=device-width, initial-scale=1" /> set in the index.html. The problem with this I would never know how it would look like on the real device before deployment, which is time-consuming and tedious. Why is this happening?
The browser engine on your computer and on your phone might not be the same.
Are you using the same browser on both? like chrome??
If that is not the case, there will be some differences.
Hope that helps.
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.
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 building a web app, which is intended to run on the Android browser.
When I have a webpage that contains any kind of viewport meta tag, like this:
<meta name="viewport" content="width=400"/>
My webpage crashes on ajax calls. It happens when using the emulator, the actual browser on my nexus one, and on a droid (all running Android 2.1).
Without the meta tag, the ajax calls run as they should.
Any ideas?
You may try using the below meta tag.
I have successfully used both these meta tags and AJAX calls did work for me on the Nexus One.
<meta name="HandheldFriendly" content="true" />
Also, it's recommended these days that you set content="width=device-width" and style the page with CSS to look at least tolerable. Otherwise you get a ridiculously zoomed-in page on the iPad.
Of course, never mind if you already have a way of dealing with that.