I have an iframe that contains some form elements. I have tried putting the meta tag within the iframe page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
as well as setting the css for the input:
input[type="text"] {font-size: 1em;}
Neither seem to work if the form is within an iframe. If the user taps the text input, it still zooms in. Is it possible to prevent zoom in this case? I am using Android 4.2.1 on an S3.
edit: I have found the CSS does work, I just wasnt setting large enough. Unfortunately this also breaks the layout.
you can try:
touch-action: none
I am unsure if android supports this yet. It was originally only for IE as ms-touch-action.
Here's some more info: http://docs.webplatform.org/wiki/css/properties/touch-action
Related
I'm lost and can't figure out how to convince Mobile-Firefox to load my site fully zoomed out :/ I couldn't find a working solution searching both stackoverflow and the web. Here's a link to the
WEBSITE!
There is no separate mobile-version of my website. I allow zooming in and out and on iPhones, iPads and the stock Android-Browser it works flawlessly. But using Mobile-Firefox on my Android it loads the page zoomed it... and that alone isn't the main problem!
The "clickable" area of the page remains the same small "box" of the initial-zoom: I can't slide my sliders, I can't even click on pictures outside of that small "activity box" to open fancybox-links and the like. As soon as I pan my site into that little "box" I can slide, click links and interact as I should be able to.
My meta-code is the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
I used html5boilerplate as a starting point for my website, do you see any conflict that could pose with my view-port problem? Another user seemed to find a solution, getting rid of another meta-tag pointing to older browsers. I find the following in my code but it doesn't matter whether I erase it or not:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I also tried to work with the following code snippet, to no avail:
<style>
-moz-#viewport {
width: device-width;
initial-scale: 1;
}
</style>
Maybe someone knows a simple solution to this? I would be so grateful for any kind of help, advice or hint on how to tackle the problem :) Thank you very much in advance!
Cheers, Merlin.
Set the viewport width to the width you want it to be for mobile:
<meta name="viewport" content="width=640">
width=device-width forces the browser to have a 360px on Android, and 320px on iPhone.
Apparently if you set the width tag alone and set no other tags, it works.
I had a lot of work and the solution came after I inspected other sites that worked on firefox mobile. The solution was to increase the meta tag viewport:
This worked perfectly here.
<meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no">
So I have this tag defined:
<meta name="viewport" content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />
I also tried:
<meta name="viewport" content='width=device-width, initial-scale=1.0, user-scalable=no' />
On the Galaxy Tab 2 I was testing my website on - this correctly blocks any type of double-tap or pinch zooming.
But as soon as I change orientation - I can zoom in again! The behavior is strange as I can zoom in only, not out. And I can do it both with the double tap and pinch.
Changing orientation back does not fix the problem, every subsequent orientation change has this issue...
Anyone has seen this issue before?
Thanks!
cierech
Had the same problem and solved it by switching to HTML5. That means:
<!DOCTYPE html>
<html lang="en">
Maybe you need to use the undocumented "target-densityDpi" as seen here: https://android.googlesource.com/platform/external/webkit/+/f10585d69aaccf4c1b021df143ee0f08e338cf31
I'm facing the same problem without a solution. The logical conclusion is that the browser window must be resetting the meta back as "user-scalable=1" when I initially set it as " user-scalable=0".
The bug happens to me only when I'm using CSS transition3d to move the page content and reveal a sidebar underneath for off canvas menu (like Google mobile or Facebook mobile app). If I use negative margins to push the content, it doesn't happen at all in my testing.
One thing I've tried doing is to replace the meta viewport tag every time the user changes phone orientation. However, I am not sure if it is actually working or not since the bug seems to happen maybe every 6 page reloads + orientation to landscape. \
function updateMetaOrientationChange() {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;')
}
I want my webpage to be full screen and disable zooming on all mobile devices.
With the meta tag:
<meta name="viewport" content="width=1165, user-scalable=no">
I am able to do this for iPhone/iPad, but on Android devices the website is zoomed in to about 125%.
If I use the tag
<meta name="viewport" content="width=max-device-width, user-scalable=no">
I get the opposite result. So then it works on Android but it doesn't work on iPad/iPhone.
Unfortunately each browser has it's own implementation of the viewport meta tag. Different combinations will work on different browsers.
Android 2.2: viewport meta tag does not seem to be supported at all.
Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.
<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" />
Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to 'no' means your own scale is ignored, this is the issue I'm facing now that drew me to this question... You cannot seem to disable zoom and scale at the same time in 4.x.
iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0 (keywords yes/no don't work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don't need min and max since you can switch off zooming in the expected manner. Only use width or you'll run into the iOS orientation bug
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using user-scalable=no.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it's almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.
[EDIT]
Android 4.x Chrome browser (which I think is pre-installed in most countries): You can make sure the user cannot zoom and the page is fullscreen. The downside: you have to make sure the content has a fixed width. I haven't tested this on lower Android versions. To do this see the example:
<meta name="viewport" content="width=620, user-scalable=no" />
[EDIT 2]
iOS/Safari 7.1: Since v7.1, Apple have introduced a new flag for the viewport meta tag called minimal-ui. To assist with full screen apps, this hides the address bar and bottom toolbar for a full-screen experience (not quite Full Screen API but close and doesn't require user acceptance). It does comes with it's fair share of bugs as well and doesn't work in iPads.
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[EDIT 3]
iOS/Safari 8 Beta 4: The viewport meta tag minimal-ui mentioned in EDIT 2 has now been removed by Apple in this release. Source - WebKit Notes
HTML
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
jQuery
Option 1:
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
Option 2:
var deviceSpecific = {
iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
$('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
Option two being a bit more of a last resort if you're finding inconsistency.
Simply use:
<meta name="HandheldFriendly" content="True" />
Works well on my Samsung Note II and HTC Desire.
For Apple devices is easy:
<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" />
The first tag run the web app in full screen mode when you open it via a shortcut icon placed on the iPhone/iPod/iPad home screen.
The second tags works only in conjunction with the first one. Possible values are: default, black and black-translucent.
The third tag blocks the site width to its standard size (1.0) and does not allow zooming.
NOTE: as the "apple-mobile" meta tags are ignored on non-Apple devices and the 3rd tag is official in HTML5, you can use all of them together.
For Android you have not a global solution since not everybody uses the default android webbrowser. See Fullscreen Web App for Android
Here some other useful links:
Tips for iOS:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
All the official and unofficial known meta: https://gist.github.com/kevinSuttle/1997924
Android fixed it from version 4.4.2
<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" />
I have a Samsung Galaxy Note 4 and use chrome as my browser. I found it was ignoring the viewport meta tags, got it to work with HandheldFriendly. I ended up with a meta tag combo. Works for me on Android and iOS.
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">
I was having all kinds of problems with this and even started to build a browser detection system to deliver different viewport tags to different browsers. Then I decided to try simplifying what I was doing and everything worked. Set the viewport to the width you want your site to be and walk away everything is working now.
<meta name="viewport" content="width=1165 />
For what it's worth, here's what I used to get a 1024px width content page to go exactly full screen on my Nexus 7 (Android 4.2.2)/Chrome, landscape only without resorting to javascript*:
width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no
(I think the user-scalable=no actually negates the min- & max-scale though). I got the .94 value by trial and error, not by any sort of calculation invoking device pixel density or anything like that.
*i.e. to force content width to match window -- I did use js to conditionally write the viewport meta content.
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
We used the following Javascript in the header to set the meta tags:
<script>
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site
} else {
document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need
}
</script>
You could add additional conditions and set them for your specific needs.
The below suggestion from Dan B has worked great for me, i have been having all sorts of issues trying to get my site to load right on android, and this has sorted it. For now anyways!
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
Thanks!
I am using this code to prevent zoom in iPhone and problem was solved but another problem arises; when I click on input field whole window jumps up then sets its position to normal, when i pressed go button same behavior occurs and windows jumps. i need to get rid of jump so that only window resizes it to normal location.
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
I'm having an issue with the stock Android browser on a page I'm building. Simply put, the page won't scroll vertically without zooming in first. I thought I had it figured out when I caught that the tag was reporting a smaller height than the browser window, but fixing that did not cure the scrolling issue. (The black box on the index page reports the calculated height of the element.)
My test device is a Droid Incredible running Android 2.3. Scrolling works in Firefox for Android, as well as my Android 4.0 tablet and all iOS devices.
My dev build of the site is here: www.adamjdesigns.info/csu/engage
EDIT - Other code I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) {
$('html').css({'height':$(window).height(),'overflow':'auto'});
}
Any help is greatly appreciated!
Though it's a hack, I have another fix that might help developers. I found that with the stock Android 2.3.4 browser, if one increases the initial page load size up from "1" to a slightly increased size, vertical scrolling works without having to pinch zoom first. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.02" />
I figured it out! There was an iframe for a YouTube video in the page, and I'm not sure if it's the iframe itself or the related scripting to play the video inside it, but removing that from the DOM solved the issue. (I had it set to hidden on mobile screens anyway.)
Thanks for your help, everyone!
FWIW, I was having a similar problem with my webpage not scrolling in Android 2.3. I used Gatsby's answer with some conditional Javascript to fixed the problem. Here is my final code:
<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
window.onload=function(){
var ua = navigator.userAgent;
if(ua.indexOf("Android")>=0){
var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion<=2.3){
document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
}
}
};
</script>
This solution first sets the normal meta viewport tag which works great with most devices, then uses conditional javascript to detect the android version and change the meta tag content to the "hacked" value (provided by Gatsby) that allows for scrolling on Android <= 2.3. This prevents the unnecessary horizontal scrolling for devices that don't need the hack.
What i found to be the problem was I had added overflow-x: hidden; to my body tag. This should turn off the horizontal scroll bar, but instead in Android it turns off the vertical scroller. And in Android, I can scroll horizontally only. Probably a bug in Android browser. I am using old android phones (HTC Thunderbolt). I went through my css file and removed all overflow-x:hidden and now I can scroll vertically again.
Try this for your viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
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