I'm developing a mobile web-application. And I faced with the problem: when I focus any input text field on the page, the page scales (zooms), and besides only in android browser. Setting user-scalable=no in meta tag has not solved the problem.
Any ideas?
Thanks
Here is my veiwport:
<meta id="viewport" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi" />
Try this , it works fine for me in galaxy pop
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
In your java code try this,
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
Try this and let me know what happen..
Related
My meta viewport is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
On an Android phone under Chrome my web page display is not scaled. It appears with tiny text, pics, etc. The same page is fine on my iPhone.
Does anyone have any ideas/suggestions?
Try this:
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Check out the attributes for viewport https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
user-scalable=1" - should also be 'yes' or 'no'
This viewport is scaling down perfectly for iphones but it does nothing right but preventing the user to zoom on the site for android phones.
The site has 1080px width, how can I scale it down to 320px correctly?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
i would say use css to over come this i had the same problem and i sorted it using css it does mean doing a bit more css coding but i think it would be your easier option in my work with IOS and android i find it easyer to worek with IOS as they not that far of desktop browser standards un like android
Try setting scalable to NO rather than 0;
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
this usually works for me.
Steve
I'm trying to display an image (320x480px) in a webpage on android.
I'm trying to configure the viewport meta cause I want the image displayed in full screen.
Actually I simply configured the viewport like that
<meta name="viewport" content="width=320px" />
and it's working perfectly, except with the android default browser. I tried Chrome, Opera and Firefox, and they all display the image correctly.
Regarding this post Full webpage and disabled zoom viewport meta tag for all mobile browsers I tried to configure it in this way without success :
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
or
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=320,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Do you have any idea on how to configure the viewport correctly ?
Thank You
<meta name="viewport" content="user-scalable=no, width=device-width">
user-scalable - controls wither the user can "pinch-to-zoom".
width - the width of the viewport.
All of the attributes require integer values, NOT floating point values.
In other words, 1 and not 1.0. Or you could use percentage.
There is no point in setting min and max scaling attributes to the same value.
Also, initial-scale is known to cause problems in iOS if set to 1.
I tried the below one. It works perfectly for me.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
I like:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="width=321; user-scalable=no;" />
Android only accepts viewport widths GREATER than 320, so setting it on 321 did the trick for me.
I am using the following html code
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
test
</body>
</html>
My intention is to prevent user from zooming in or out. The above code isn't working in iPhone and Android. Any solution ?
EDIT: It appears in iPhone settings, if Zoom is selected as On under Settings>Accessibility>Zoom, then this will override meta tag. Source
Not sure why it is happening in android.
I use this tag to prevent zoom on all mobile platforms :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
With , and not ;
In my part, I've this "viewport" which work good on an Android (Nexus 5) and on iPhone.
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />
I hope this help you !
Put this script to avoid pinch zoom. in latest version of safari, if meta tag not working
document.documentElement.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />
worked well on Samsung Galaxy S3
It seems it doesn't work any longer in the normal iOS (11.3) Browser.
However it still affects the webpage, if added to the homescreen, and launched from there.
So if you touch the share menu, select "Add to Home Screen", and open it up from there it will stop you from zooming as expected:
<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
Some time you need to add -webkit-flex:1 to containers (if flexbox in use ofcourse). That is helped me with my viewport problem.
I have written a small web app to collect some data and store it in a central database. I'm walking around, reading values and typing them into a web site on my Android smartphone. It's just for me, so no public usability concerns apply this time.
Now I want to add a button to increment a reading by one, and I need to be able to push that button several times. But if I do it too fast, the browser recognises a double-tab and scales/zooms into the page.
I have added a viewport header already and played with every value combination I could find on the web. But the page remains scalable. How can I stop that?
Here's a minimal test page that fails for me:
<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>
Adding initial-scale=1, maximum-scale=1 and all sorts of target-whateveritwas-dpi doesn't change a thing. I have restarted the browser (Dolphin HD and the stock browser) and cleared the cache already. I'm on Android 2.2, the phone is an HTC Desire.
This worked for me in all android browsers:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
A common mistake is that people use 2 meta viewport tags like this:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
The second meta viewport tag overrides the first one in some browsers (for example - chrome for android).
There is no reason to have two meta viewport tags, as the second one is contained within the first one.
See This answer for more details
It's a known bug in Android browsers : http://code.google.com/p/android/issues/detail?id=11912
I have tried all of them but not work for me. And I found this one really work.
<!-- set viewport to native resolution (android) - disable zoom !-->
<meta
name="viewport"
content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
/>
from http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-android-browser-force-native-resolution/
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
Meta Viewport tag does solve the problem in most of the cases. But Android has a strange issue where on orientation change the meta tag is reset and you can scale or zoom the page again.
For fixing this issue in Android monitor orientaionchange and set meta viewport tag on every orientationchange event.
Here is the link with code snippet http://moduscreate.com/orientation-change-zoom-scale-android-bug/
"user-scalable=no" has never worked for me, instead I use "user-scalable=0" which seems to work a treat.
Use below lines of Code :
Check the application Samsung Galaxy S there it is supporting. But when I am opening the same link inside the Galaxy Ace there Turn Off the Zooming is not supporting.
Please Check your application some Other mobile and check. Please go through below link you will get the Idea:
http://garrows.com/?p=337
Try all of this at the same time (extracted from here):
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Then tell us your experience