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'm developing app based on PhoneGap for Android devices. My app is working fine in AVD device (320x480), however in AVD with 720x1280 resolution (Galaxy Nexus) it displays layout's elements not properly, i.e. they are too small. Here is the LINK to screenshots. How can I fit the layout to the whatever device display?
AVD characteristics:
Eclipse Juno IDE
Java SE 7
Android SDK API 17
PhoneGap 2.7.0
jQuery 1.9.1 and jQuery Mobile 1.3.0
and here is the meta tags:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
I'm really stuck and need to help. Thank in advance.
Please explain the results that you want to see and maybe I can give you a better answer.
You are dealing with different resolutions and pixel densities, so any elements that are of a fixed width and/or height are going to look differently. In the case of those buttons, the height is fixed but the width is something like 95% of the page, so they stretch out to fill the width but are narrower because it is a fixed number of pixels high and the pixel density increased.
You will likely need to use CSS media queries to adjust the font size, widths, and heights according to the screen size and pixel density.
Right now I'm using the following viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
The medium dpi scaling seems to get the best results in terms of default legibility. On most pages, when I rotate between portrait and landscape, the scaling stays at that level, however, on pages where I have orientation media queries, a higher zoom level is triggered, which is not desired.
I know this can be resolved by using target-densitydpi=device-dpi, but on high-resolution Android phones this doesn't look good, so I'd prefer to keep the target-densitydpi=medium-dpi.
Am I correct in thinking that the above meta tag should lock the scaling at medium-dpi? Also, is there a way to prevent the scaling/zoom on rotation as described above?
With that below i never ran across you issue
<meta name="viewport" content="user-scalable=0, initial-scale=1.0, width=device-width" />
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" />');
}
My designer handed me a 640w design to work with on an iPhone and Android mobile website.
I got everything setup using the 320w measurements and replacing graphics with media queries based on pixel ratios. This is mostly a problem with images in the design being used as a background image to an element and other elements defined in PX dimensions. We've sized all of our typography as EM's so one simple media query could adjust all of the typography but the icons and layout graphics would still not be correct.
The problem I'm running into is that the 480px wide Android test device looks too zoomed out, I tried to use different variations of the meta viewport tag to handle this. Each of the following was tried, independently, without yielding the desired effect.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=320" />
This is mostly a problem with images in the design being used as a background image to an element and other elements defined in PX dimensions. We've sized all of our typography as EM's so one simple media query could adjust all of the typography but the icons and layout graphics would still not be correct.
Mobile web is a bit uncharted for me and I'd like to find a way to handle this with the viewport setting rather than defining additional media queries. My understanding is that the viewport meta exists to help handle this type of problem across multiple viewport sizes without having to define new media queries every time a slightly different viewport comes to market.
If my approach is off please do share a reference to a better approach. We have a mix of elements that need to be fluid and fairly fixed, which makes this a challenge but I'm open to suggestions!
Replace your meta tags with these and see if it helps:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If those don't help then it would help to see your code to get an idea of how your CSS and HTML are laid out.