I seem to have problem when loading html.
without html head and meta tags my page is bigger because of images.
although i have set inline style for them:
""
so basically image should be 100% but limited to screen resoultion.
but in reality they are 4-5 time bigger than my screen resolution.
when i set meta tags the images are displayed perfectly fine within bounds of the page:
however font sizes are broken font-size:1px stated inline, shows something like 14-15px in mobile app
but when i remove meta from html font-size:1px will be really 1px in mobile app.
any idea's how can i solve this issue. also this only happens on android.. on IOS i don't have such issue with meta and font sizes.
you html must be responsive you need to add meta tag viewport
<meta name="viewport" content="width=device-width , initial-scale=1, maximum-scale=1, user-scalable=0" />
Viewport ?
I've made a website for mobile. When I use this tag
<meta name="viewport" content="width=device-width, initial-scale=1">
my website fits the screen perfectly on all mobiles. But then the font sizes look different especially on chrome mobile browser of android. Chrome changes the font sizes of the text and displays some parts bigger and some parts smaller. I used
body{
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-o-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
}
but this doesn't solve the problem for some androids like Nexus. So I switched the viewport tag to
<meta name="viewport" content="width=device-width, initial-scale=1">
This sorted out the font size issue but this time some webpages don't fit all screen sizes perfectly. What shall I do so I get the best of two worlds? The paragraphs starting with "At Magenta Storage.." and "Give yourself more space.." are supposed to have the same font size. For the link to the website, you can click here
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 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 trying to create a mobile website for android. When I set the width of the body to 480px (the width of the screen) the result is about 50% larger than what I expect. It seems that android is scaling what it draws and messing up all my layouts. Does anyone know how to disable this, or work around it?
I'm already using this:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
You're missing the secret new Android-only viewport property "target-densityDpi" which you can use to configure browser scaling. See the linked question for more details.
A device running Android does not necessarily have a screen width of 480 Pixel. Don't set a fixed width at all.