I got a weird problem with the viewport. On iPhone & Android landscape it looks great, but in Android portrait mode it looks horrible.
Here is my meta tag:
<meta name="viewport"
content="user-scalable=no; width=device-width; target-densityDpi=device-dpi"/>
Images below:
Try using commas instead of semicolons as delimiters. Also, I wouldn't bother with target-densityDpi=device-dpi as it's only supported in older Android browser versions and does more harm than good.
So, that would give you:
<meta name="viewport" content="user-scalable=no, width=device-width "/>
Related
I'm having a difficult time with a mobile site I'm creating.
Everything is working as expected on all of the devices I've tested, and all of the different mobile browsers I've tested, aside from one: Chrome (v38.x) on Android (Nexus 7)
Essentially, what is happening is that everything is seems to be blown up/zoomed in, and it's making the site layout look ridiculous.
I'm using the meta viewport tag and em-based media queries to show different layouts depending on the device.
Here is a very simple example of what's happening:
<head>
<title></title>
<meta name="viewport" content="width=device-width;initial-scale=1.0;" />
</head>
<body>
<div id="top">Font size: 1em</div>
</body>
JSFiddle: http://jsfiddle.net/t6fdb3ak/3/
And below is a screenshot of how this displays on the Android Chrome browser.
This seems absolutely wacky, why is this happening?
Also, if I alert the innerWidth of the window on this page, I'm getting 121px instead of 980px.
<script>
alert(window.innerWidth);
</script>
I solved the problem after reading some of this page https://developer.chrome.com/multidevice/webview/pixelperfect
I removed the semi-colons from the viewport meta tag, and replaced them with commas, like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is how it looked before:
<meta name="viewport" content="width=device-width;initial-scale=1.0;" />
Hopefully everything will still work in the other browsers. I'll report back if not!
Try to import bootstrap, They have a build in viewport, if you use that it will work for sure.
I rewrote my web site to be formatted for mobile devices. However, the display width is inconsistent on different devices. On my android device the width looks fine but on another person's android device the width is much smaller and therefore unreadable.
I use the following viewport in my html file:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" /
This is my main div in the html page:
<div id="maindiv" style="margin-left:1.0em; margin-right:0.5em">
Do I need to put a width paramter in my main div? Or can anyone tell me what I should do to ensure a uniform body width for mobile devices?
you'll need to build a responsive site. If you have fixed widths on divs you'll need to use css media queries. Since IE 8 and older don't support media queries you can use a plugin like respond.js. With this plugin you'll only need to add it to your page and use media queries like you normally would.
Do you have a link to the site?
Media queries can be used for targeting specific browser/device width so you can style things only when the browser/device meets that media querier specification.
However, if you change #maindiv width to 100% or use max-width, I believe this will fix your problem. Also in an external style sheet or on the page you'll want to add the following css to make your images responsive:
img {
max-width:100%
height:auto;
display:inline-block;
}
Also remove:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" />
and put:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">
I have developed a webapp and successfully used the viewport element to fit the app for different devices. On iPhone for example i used this one:
<meta name="viewport" content="width=685,user-scalable=0" />
My webapp looks fine with this viewport on the iPhone Safari browser. Therefore i thought, it would be easy to wrap my webapp with the help of PhoneGap as an AppStore App. But so far i had no luck to do so. The viewport tag seems to be ignored completely.
So here is my question:
Does the viewport tag work at all with a specific width (like in the above example) on PhoneGap? Or do i have to rework everything to responsive web design?
I've been fighting with the same for a few hours.
With the last version of phonegap i managed like this :
In your main java, add the following lines BEFORE super.loadUrl(blablabla
super.init();
super.appView.getSettings().setUseWideViewPort(true);
super.appView.getSettings().setLoadWithOverviewMode(true);
This still will allow the user to "double tap" to zoom in/out. So modify your meta with this :
<meta name="viewport" content="width=685; target-density-dpi=device-dpi ; initial-scale=0.1; maximum-scale=0.1; user-scalable=no;" />
It worked for me with Phonegap 3.0, and Android >= 4
Use the meta tag like this to set the width automatically to device width:
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>
Hope that helps.
Try adding this to the header of html
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>
and this to your config.xml:
<preference name="EnableViewportScale" value="true" />
Try this-
< meta name="viewport" content="width=device-width; user-scalable=yes; initial-scale=0.1; maximum-scale=5; minimum-scale=0.5" />
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 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