Develop Reference

Viewport issue on normal orientation mobile [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
There is a viewport issue on vertical orientation of the mobile.As you can see,below the footer,there is a white space which fills the screen.If i turn the orientation on horizontal, the viewport works fine,same for tablets,desktop,etc..this issue persists only on vertical orientation of the mobile.Is there any way to fix this?
I already have this metatag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

You need use media queries:
Start with your mobile (base) styles first in your CSS (This is typically a single column layout).
Then use media queries using min-width at progressively larger viewports breakpoints (This is where you would apply your grid styles).
Use each each larger min-width breakpoint to override the previous
styles to provide an appropriate layout based on the viewport size.
Make sure to use the <meta name="viewport" /> tag in your html to ensure optimal mobile presentation.
Using Cascading min-width media queries will allow you to know exactly what properties are being applied based on the screen width and make troubleshooting your css easier.
Edit - Added media query reference links:
Media Query Logic
7 Habits of Highly Effective Media Queries
Mobile First Example - Single column on small screens and two columns larger with a border color change on even larger screens
div {box-sizing:border-box; width:100%;border:solid 1px red;}
#media only screen and (min-width:37.5em) {
.half {
float: left;
margin: 0;
width: 50%;
}
.row:after {
content:"";
display:table;
clear:both;
}
}
#media only screen and (min-width:50em) {
div {border:solid 1px green;}
}
<div class="container">
<div class="row">
<div class="half">Stuff 1</div>
<div class="half">Stuff 2</div>
</div>
<div class="row">
<div class="half">Stuff 3</div>
<div class="half">Stuff 4</div>
</div>
</div>

Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
More Info
I hope it helps.

I'm not sure if the " marks make a difference but you could always try.
<meta name=viewport content="width=device-width, initial-scale=1">
https://developers.google.com/speed/docs/insights/ConfigureViewport
Edit 1: Try working with Media Queries if that solves the problem https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Did you try maximum-scale?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

adjust the webpage to fit any device

Does this tag <meta name="viewport" content="width=device-width; initial-scale=1.0"> works on web applications that works on android? or its just for iphone ?
and this is piece of css code
body
{
padding:20px;
background-color:#ffffff;
font: normal .80em arial, sans-serif;
background-color: #FFCC66;
margin: -10px;
padding: 0px;
width:96%;
}
#wrapper
{
width:100%;
}
the wrapper does not give any result.

Yes it does for for Android and iOS. I added some sources below for those that want to understand this a bit better.
NOTE: Don't just rely on this little HTML tag! Depending on what you're making you may have to use some CSS, or Javascript/JQuery.
You have conflicting code.
I'm sure you know that everything you embed goes into your body. Which is why I'm unsure as to why you set margin to -10px which means everything you embed is going to follow suit.
In addition the default color of the body is set to white which again I'm wondering as to why you added that in addition with two padding properties.
You stated you want the webpage to fit any device. By looking at your code at face value it looks as if you grabbed bits and pieces and put it together without any knowledge as to it itself. The World Wide Web Consortium (W3C) Schools page is a great place to learn the code as they're the ones who work on the world wide web.
Here's some CSS to start out with for what you want to do by making your page responsive.
body {
margin:0;
padding:0;
width: 100%;
height: 100%;
font: normal .80em arial, sans-serif;
}
Now I could be wrong on what I stated before when looking at your code at face value. However if you want a responsive layout while doing Javascript functions. I find using JQuery, and JQuery Mobile to be very handy. It saves massive amount of time coding, and it's built to be responsive so you don't need to write and make sure this div has x padding to match for IE. There's tons of API's available that make using JQuery, and JQuery Mobile easy to use. Everything takes learning so check into this if you haven't.
Here's a good starting code using JQuery and JQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<title>Site Name</title>
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type='text/css'>
/* CSS Here */
</style>
<script type='text/javascript'>
$(function() {
// JQuery here. If you need help refer to jquery.com
});
</script>
</head>
<body>
<div data-role='page'>
<div class='header' data-role='header'>
<h1>Site Name</h1>
</div>
<div class='content' data-role='content'>
</div>
</div>
</body>
</html>
Sources:
http://www.w3schools.com/
http://jquery.com/
http://jquerymobile.com/
Using the viewport meta tag to control layout on mobile browsers
Stop using the viewport meta tag (until you know how to use it)

Website doesn't fit full screen on the mobile screen

When I test my development website on any Android mobile phone, the website doesn't fit full screen on the mobile screen. Attached is the snapshot. I' am just trying to make it mobile friendly.
I' am using wordpress with Twitter Boostrap to make my website. On my head tag, I have few meta tags that I found on the Internet for mobile friendly websites. Please note that this is not a responsive website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">
Please help?

If you were designing a responsive site, but want to "fix" the width of the site in mobile i.e. 800px max width, I found that my only solution was to update the initial scale size. What worked nice for me was something like this, notice the "initial-scale" value:
<meta name="viewport" content="width=device-width, initial-scale=0.4">
Hope this helps someone!

I have had recently the same issue on tablets/phones and fixed that with the following snippet.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
</style>
<script>
// Important for windows phone 8
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>

Make sure you're using the responsive classes included with Bootstrap in order to allow for design within the Bootstrap framework. In Bootstrap, all content is on a 12 "column" grid, and then split up based on that grid.
In Bootstrap 2.x
<div class="container">
<div class="row">
<div class="span6">
Content here
</div>
<div class="span6">
Content here
</div>
</div>
</div>
will produce two divs that span the width of the page.
In Bootstrap 3, they changed their class names slightly to account for different window sizes. The same example, provided you're on a mobile, device would be:
<div class="container">
<div class="row">
<div class="col-xs-6">
Content here
</div>
<div class="col-xs-6">
Content here
</div>
</div>
</div>
You can remove responsiveness in Bootstrap 3 by following these steps:
http://getbootstrap.com/getting-started/#disable-responsive
More information can be found here: http://getbootstrap.com/css/#grid

I know it's an old question but since it shows up in google I thought I'd share the solution I came up with, in case anyone else needs it:
If your website isn't responsive, you don't need the extra meta tags at the header. Try to remove them and it should work as expected.

android autofit mode causing issues with css width in web page

I am having problems with the auto resize feature of the android browser. The widths on my site are going a bit haywire when the device is in portrait mode.
What I would like to do is
Have the same version of the site for both desktop and mobile users.
Allow the user to zoom in and out as they please.
I currently have the following in my head
<meta name="viewport" content="width=1100">
I found the following blog post which describes my problem.
This is definitely caused by the auto-fit layout
("kLayoutFitColumnToScreen" in the Android WebKit source code). Just
try the test with auto-fit disabled and everything is rendered
correctly (at least on my Android device).
The auto-fit mode on Android seems to shrink certain elements' width
without affecting their positioning, or the positioning of other
elements. So if you have a containing block with width: 1000px and
text that spans 100% of that width, the container may remain 1000px
wide but the text inside it will wrap at the screen width.
http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html
Is there a way to stop this autofit mode from kicking in? I don't want to disable zooming.
Update:
I am still searching for a solution if anyone knows of one.
Have found someone with the same problem (although they are using tables)
Spanned columns collapsing on Android web-browser (when using auto-fit pages)
http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

I have been experiencing this problem and found a solution that works for me.
I have one main <div> with some nested <div> elements inside. The HTML is very basic. I found that one <div> within my main <div> would wrap its text as if I had double-tapped the text to zoom in on it. This <div> only contained text. This behavior occurred only in portrait orientation, and it corrected after double-tapping or switching orientation.
Since this problem is an Android bug, no CSS or HTML can really fix it. However, the following CSS resolved the problem satisfactorily for me; and I didn't have to turn off "Auto-fit pages":
I added a CSS background-image to the <div>. I just used a transparent, one-pixel PNG as the background.
div { background-image: url(../img/blank.png); }

Just furthering the answers above which worked for me with an important caveat: the redraw time in IE8 makes the 1x1 transparent pixel method unusable on that target on a decent size canvas.
Since CSS can't detect auto-fit, or android browsers (chrome on Android seems fine anyway), my workaround was to
target smaller devices (since IE8 tends to be desktop), and
only target the relevant 'p' tags (autofit only targets some 'p' tags), so if we apply this fix only where it is needed then we keep the redraw performance impact as low as possible.
My workaround (based on Demetic's answer above):
/* work around mobile device auto-fitting */
#media only screen and (max-device-width: 800px) {
#content p {
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
background-repeat:repeat;
}
}
On my website '#content' is where the 'p' tags reside that are being auto-fitted, naturally you'd need to change this. 'body' will work, yes, but the more specific the lower the impact on redraw time.
It may be worth adding in a portrait-only detection mode since auto-fit doesn't seem to be targeted at landscape - but I haven't tested it on enough devices to confirm that this is always true.

I just wanted to confirm that Delbert's solution was the only thing that worked for me. It's not completely apparent as to why this works, but it works. I've done some fairly exhaustive searching on the issue, and the links from Tom's original post seems to include about all there is out there.
For what it's worth, I tried some fairly aggressive attempts at correcting the width of some <p> tags nested deeply within a chain of <div> tags using some of the proposed solutions here:
* { background-color: transparent; } did not work for me.
However, * { background-image: url("/image/pixel.png"); DID work for me (where pixel.png is a 1x1 transparent PNG). I eventually relaxed this to apply only to my nested <p> tags, and found that my paragraphs were finally spanning the intended, correct width.
I also confirmed that the behavior is a result of the "Auto-fit web pages" setting. I do not own an Android, but experienced these issues using the emulator.
Thanks again to Delbert for the tip.

Same problem here. The content within my <p> tags is smushed to left side. No good solution found yet though I've found that if I add a background color to my <p> tag it "fixes" the issue. I'm still trying to find a real fix though since adding a background color is not ideal.

*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}

Yes it seems that Android 4.x is in cause. Really annoying because it is the default behaviour !
It completely destroy all my websites...
I didn't found any solution at the moment.
The proper behaviour is to fit the text with the width of your screen when you double tap the area. It seems that this feature is active even when not zoomed.

I simply add a transparent png image as a repeated background. This also works for H1, H2, H3... tags that seem to be plagued by the same narrow-column problem. By using a transparent png, it allows me to still assign a background color or show whatever is behind the element. This is not perfect, but it is the simplest solution I have found that does not rely on any browser-specific hack and seems to work well in all other mobile browsers I have seen.
Although, I have noticed the same behavior on SPAN tags as well, and the above does not seem to work for this element... weird!

give Width in % instead of px, like width:100%;

I have nearly the same problem with p tags and li's they are much smaller then the surrounding container, but only with Android 4.x. With Android 2.3.x and Android 3.x "auto-fit pages" has no negative side effect.
Seems they tried to improve something, but it worked better before, that's annoying.

This appears to be a programming issue with Android. But in your mobile browser under Settings=>Advanced uncheck Auto-fit pages and this can be resolved. But we may not want our users to abide. So for the time being a simple hack as to placing a transparent background image should not be ruled out as a temporary solution. Using Drupal as a framework and Omega as my responsive theme and knowing my layout regions and outer DIVs are set to {display:block width:100%} this drove me nuts for a few minutes. But the transparent image worked nicely.

I set a min-width and a width on the td where my email content lives and is now working fine in Android's gmail app where versions use autofit mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gmail Issue</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" valign="top"></td>
<td width="1100" valign="top" style="min-width:1100px;"></td>
<td width="50%" valign="top"></td>
</tr>
</table>
</body>
</html>

One thing is for sure, the auto-fit 'feature' is causing a lot of gray hair for developers.
I solved the issue by inserting a transparent image, 1 pixel tall and 650 pixels wide (the width of my email) at the very top of my email.
Even with auto-fit enabled my email now renders as it's supposed to.
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- HERE'S THE MAGIC -->
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
<img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" />
</td>
</tr>
</table>
<!-- END THE MAGIC -->
<!-- Start Wrapper-->
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
REST OF EMAIL HERE
</td>
</tr>
</table>
<!-- End Wrapper-->
</td>
</td>
</table>

By adding a background image to your css, auto-fit will be disabled.
Other posters have suggested adding a single pixel transparent background, but you can actually just add an empty background image to the top of your css stylesheet and skip the additional http request and redraw.
div, p {
background-image: url();
}
I have tested it in my emulator and my Galaxy SII and it seems to work the same as adding an actual url.

Incorrect width in Android webkit browser

I noticed a problem on Android's default browser, where 100% width may actually go past the edge of the screen. Here's a minimal test case:
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'> </div>
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>New & improved div</div>
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>another working one</div>
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>another</div>
This works as expected on a desktop browser, but in Android webkit browser, the first div goes way off the screen, and doesn't change width when zooming in and out. The divs after it work correctly.
Update: I've tested this on 2.3, 3.0, 3.1, and a newly created 2.2 emulator, they all fail to size it correctly. It looks like other people have noticed this, see here
and here. Anyone know a good workaround for this bug?

Just add this meta tag inside your html head tag .I've checked it with android 2.1 browser and it works fine on zoom.
<meta name="viewport" content="width=device-width" />

In my WebView, I was able to fix the widths by turning off wide viewport.
webview.getSettings().setUseWideViewPort(false);
This disables horizontal scroll unless absolutely necessary, and div widths and zoom work as expected. Obviously this will only work with a custom WebView, maybe there is a more generic way to do this with something like <meta name="viewport" ...> ?

use
layout_width="fillparent"
:)