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%;
}
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.
to prevent horizontal scrolling in my web pages, I have used 3 different stylesheets for mobile, tablet, and desktop devices. I try to tell the browser to use the proper css file with the following tags in the head of the html file:
<link href="static/css/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="static/css/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)" />
<link href="static/css/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />
by doing so, I expect the mobile browsers to use cssS.css. but when I checked the website in a Samsung mobile phone, It appears to be using cssL.css and shrinks webpage to prevent horizontal scroll bar. this way, texts are very small and unreadable.
is there anything wrong with the approach?
What am I missing?
thank you very much.
Try the below meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
Chrome on Android has an accessibility setting that allows users to zoom in and out even if the page requests that it not be zoomable. So you may have the user-scalable setting set as you want but the browser is ignoring you. Some accessibility proponents will argue that you should never disable zooming. http://adrianroselli.com/2015/10/dont-disable-zoom.html
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.
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.
I have this html which works fine on Chrome, Safari and Mobile Safari.<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div style="position:relative;-webkit-perspective:1000;width:300px;height:50px">
<div style="position:relative;width:300px;height:50px;-webkit-transform-origin:0px 25px 0px;-webkit-transform-style:preserve-3d;">
<div style="position:absolute;width:300px;height:50px;-webkit-transform:translateZ(125px);background-image:url(http://i855.photobucket.com/albums/ab119/ansherina6/banner2-1.png)"></div>
</div></div>
</body></html>
On android 4.0.3, translateZ is not showing any (desired) effect on the div. Apart from translateZ, everything else is working fine. If I use translate3D(a,b,c) then again only X and Y values effects the rendering. Is there any workaround to this?
According to caniuse translate is supported in android 4 and up. However, I have a hunch that the more specific 3D transforms like translations on the z axis, don't garner such broad support, especially in browsers that don't support webgl. I think there is a fallback if critical: transformie