Why won't my viewport tag properly use device width (no zoom) on most mobile devices?
After much testing and continued searching, I came up with a fix that seems to be very effective. Another solution I saw to a similar problem proposed the following:
<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />
This, at first, seemed like a decent solution as it worked on most phones. It bugged me a little bit though because it obviously isn't geared specifically towards working with any device width. That answer can be found here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
This solution worked on most mobile devices, but on some it was ineffective causing the display to be using incorrect zoom.
I believe the reason why the solution above is not effective is because not all mobile devices use a base 320 for zoom. So when device-width isn't working, this causes the constraints to be inconsistent.
I tried a bunch of different things, but then ultimately tried the following which (so far) seems highly effective:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
I believe the difference in this tag is that it tells the device to use it's native dimensions, but then adds a scale factor that tells it to not zoom in as much as it would normally.
I never was able to find any CSS adjustments that solved the problem, and I welcome any other answers in the future that may add further clarification to the problem/solution.
One other thing I'd like to add, is that an alternative meta tag that may be more effective for larger devices (tablets, which the site in this problem was not designed for), may be to set maximum scale instead of using user-scalable. Like this:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
EDIT / Update 2018:
This question still gets quite a few hits even though it's a very dated problem. Certainly in hindsight and after much more experience with responsive, I can say that both the initial problem and the solutions were based around stop-gap issues that resulted from poorly constructed responsive CSS and HTML.
While the answers here may help future visitors solve for issues when it comes to retro-fitting more dated code, I would highly recommend that any new development conform to the latest in responsive standards. If your markup and CSS conforms, there are very few reasons why you would ever not want the standard meta for viewport in responsive (below):
<meta name="viewport" content="width=device-width, initial-scale=1">
How to disable web page zooming/scaling on Android?
It's a known bug in Android browsers : http://code.google.com/p/android/issues/detail?id=11912
Disable zoom on a div, but allow zoom on the page (an alternate div)
You can't do that without clever hacks.
However, you can (and should) use the following CSS to fix zoom issues on mobile devices:
header {
position: fixed;
...
}
@media only screen and (max-width: 720px) {
header {
position: absolute;
}
}
This code enables position: absolute
when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.
SVG being cut off
I had similar problem. Try to add css property:
overflow: visible
Related Topics
How to Hide Soft Keyboard on Android After Clicking Outside Edittext
Check If Application Is Installed - Android
How to Get Uri from an Asset File
What Does "Program Type Already Present" Mean
How to Get Resource Name from Resource Id
How to Use Jni Bitmap Operations for Helping to Avoid Oom When Using Large Images
Android Static Object Lifecycle
Material Effect on Button with Background Color
Android: Reverse Geocoding - Getfromlocation
How to Get Package Name from Anywhere
You Have Not Accepted the License Agreements of the Following Sdk Components
Changing the Background Drawable of the Searchview Widget
How to Display Toast in Android
Android "Elevation" Not Showing a Shadow
Using Build Flavors - Structuring Source Folders and Build.Gradle Correctly
How to Save/Store Objects in Sharedpreferences on Android
How to Parse the Androidmanifest.Xml File Inside an .Apk Package