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.
Related
Expected result (Chrome)
I have developed a mobile web app that works great with Chrome on Android. Here is a screenshot:
The white bar with Safari
Now I have some issues with other browsers. For instance Safari with iOS 8.3 on an iPhone 5 will display this ugly, plain white column on the right. Preventing <body> to take up the whole viewport's width and triggering the vertical scrollbar:
The empty page with the Android default browser
On the other hand, the "Browser" application that comes with most Android phones won't show what is below the top navbar:
This occurs for Browser 4.2.2 on a Wiko Iggy , but the problem is not present for Internet 2.1.34.1 on a Samsung Galaxy S4 (are "Browser" and "Internet" different applications developed separately? I have no idea.).
Markup
Here is the high level markup of the app. I'm using AngularJS with a yeoman generator and mobile-angular-ui as a UI library.
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="no">
...
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" media="(min-width: 641px)" href="styles/main.css">
...
<link rel="stylesheet" media="(max-width: 640px)" href="styles/mobile/mainMobile.css">
...
<!-- endbuild -->
</head>
<body ng-app="myApp" ng-controller="MainCtrl as MainCtrl">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view=""></div>
<div ui-yield-to="modals"></div>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<![endif]-->
<!-- endbuild -->
</body>
</html>
CSS
I have simply no css styling at all for html and body.
I can provide any additional information that you think is relevant to troubleshoot this issue. My first priority is to get the problem solved on iOS.
There's probably something wrong with your website viewport, the body/html heights or even with "uncleared" floats.
I recommend commenting out piece by piece the UI, so you can easily debug it and find what the problem is.
I had this exact same problem.
The issue I had was that an element on my page had pixel width of greater than the width of the page.
Counter-intuitively, this resulted in other elements on the page who's width should have been 100% of the page, are re-sized to now extend the entire width of the page. I think this is because the element that was too wide become 100%, and the other elements that should have been 100% were rendered smaller in proportion to the over-sized element.
Example:
Too big element: 1000px
Device's display is 800px
... now anything that is 1000px will extend the whole length, and anything that is 'width:100%;' will only extend 80% of the page because 800px is 80% of 1000px. ... this is my theory at any rate...
I fixed this by adding "max-width:100%" to all elements that had set pixel width:
.div-class{
width:1366px;
max-width:100%;
}
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)
I have a page with the following directives
<meta name="viewport" content="width=device-width, user-scalable=no" />
I generate dynamically table cells in the following placeholder:
<div id="gadget_albums" style="width:100%;overflow: auto; ">
<table>
<tr id="albums_t"></tr>
</table>
</div>
It works perfectly on iOS devices, but for some reason no horizontal scrolling on Android. What could be a reason?
From this side I see like people try use
-webkit-overflow-scrolling: touch
but no luck either. Any solution?
The overflow: auto property for a <div> is not yet available in Android.
You'll have to find a work around for this. I mean using the combination of JavaScript, css, HTML you can achieve this.
Check this out.
Hope this helps.
I have a very unusual bug that appears on my Android 4.0 on Galaxy Note. Some friends see the same on their Galaxy S3. I simplified my code to the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;}
.player, .project-info {width:100%}
#movieplayer .short-info {width:100%;background:green;display:block;position:relative;}
</style>
</head>
<body class="works">
<div id="global-container">
<div id="movieplayer">
<div class="player">
<div class="project-info movie">
<div class="short-info jspScrollable">
<div class="container">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you first load up this page in PORTRAIT, you should see a green bar on top of a yellow background. They both fill the screen width 100%. When you rotate the phone to landscape, the yellow continues to fill the rest of the screen, but the green bar fails to fill the remaining width. Why is this?
I am using #movieplayer{position:fixed;} here because in my real code, I rely on that to do some other stuff. So I can't use position:absolute.
This issue seems like a bug in certain versions of the android browser.
The set of elements under the fixed-position container aren't asked to recalculate their width (during reflow) as a result of the resize event.
Your solution works, as it is one of several ways to force this recalculation to occur.
Oddly enough, we've found that any landscape-specific media query in css fixes it for us.
(tested on Galaxy S3):
#media screen and (orientation: landscape){
.doesnt-exist { background:red; }
}
Related links :
Android Issue 27959
Android Issue (dup) 25610
OK, I was able to hack a solution together. I have jquery installed, and then I did a
$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);
This is ugly, but it works.
We have a large proprietary MRP system based on 4D.
We are creating a very simple web page served by 4D that has a text box.
How do I convince iphones and androids to make the text box the width of the screen, so the user does not have to manually zoom?
<!DOCTYPE html>
<HTML>
<HEAD>
<style type="text/css">
</style>
</HEAD>
<META NAME="GENERATOR" CONTENT="4th Dimension - 4D">
<TITLE> Real Time Collection
</TITLE>
<BODY>
<FONT size="5";bold>
<FORM ACTION="/ProcessJobHours" METHOD=POST>
Employee ID#<BR>
<INPUT TYPE=TEXT NAME=Emp VALUE="" style="height: 48px; width: 250px;
font-size: 24pt;"><BR>
<!-- OK is a particular case-->
<INPUT TYPE=SUBMIT NAME=WEBOK VALUE="Ok">
</FORM>
</BODY>
</HTML>
What I get is:
What I want is:
I think the viewport suggestion by Alex B is a good start. Try adding this to your the section of your HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
I believe what you are looking for on mobile rendering of a web page is called viewport. I think this blogpost clarifies it fairly well.
http://bravenewmethod.wordpress.com/2011/08/28/html5-canvas-layout-and-mobile-devices/