I know there are various similar threads on this but none answer my question. Please look at this most simple HTML code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
height: 100%;
background: linear-gradient(to top, blue, white);
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
Viewed in Chrome for PC (either in normal view or in mobile simulator view) it produces a gradient background that covers the whole screen. Viewed in Firefox mobile for Android or Chrome mobile, the website has a white space at the bottom the size of the address-bar. It either appears right away or it appears when you attempt to scroll the page. Why is it there and how do I get rid of it?
i had the same Problem till hours before.
Set body-height not 100vh, but 100%.
body,html{ padding: 0; margin: 0; height: 100%; } (No background input here!)
In your html document you have to put in a new image-Tag('<'img id="image"'>')
At the end in CSS:
#image{ height: 100vh; background-image: url(..); z-index:-1; background-size: cover; }
So i found out, that 100% is smaller than 100vh actually, what actually kills the white bar at the bottom on android browser while scrolling out the navibar.
Sorry for my broken english. Greetings from germany. xD
Related
I'm loading a page in a Android app with a WebView (=embedded browser in app), with standard settings:
mywebView = (WebView) findViewById(R.id.activity_main_webview);
...
mywebView.loadUrl("http://example.com/test");
Everything works correctly except the following minor issue:
Problem: The 1-pixel-wide border is not displayed correctly: one or two of the four sides of the border are 2px instead of 1px. It looks like this:
I noticed that window.devicePixelRatio = 1.5 on my device
Here is the HTML code (I don't use a code snippet, because they are not runnable on mobile devices anyway):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#test { display: inline-block; border: 1px solid #c4c4c4; padding: 9px; }
</style>
</head>
<body>
<a id="test">Test</a>
</body>
</html>
The solutions given in this question (I have put a bounty there, so I already tested the answers) don't work: border: 0.5px solid black; or border: 0.75px solid black; show no border at all, so this is not a duplicate. This is a specific question when devicePixelRatio = 1.5 (it behaves different than 1 or 2)
Live demo here, I cannot reproduce the problem in Chrome for Android, but only in a Android app using WebView and displaying the same page (strange, isn't WebView using the same rendering engine as Chrome?)
I just have a similar problem and it is fixed, I do not if this solution will help you or not:
It helped by give a margin to the div
.brand .col-8 {
padding-right:0;
margin-right:-1px;
}
.brand .col-4 {
border-left:1px solid #d8d8d8;
}
I'm writing a game that requires fullscreen mode in a browser. I'm using various divs, makding sure they add up to a total of 100vh. When viewing the page in Chrome on Android, the bottom of the page is not visible. This is known feature. When the user scrolls up, the location bar and tabs at the top disappear and the whole page becomes visible.
Unfortunately, when going to fullscreen mode, the bottom of the page is hidden again. This is bad, as the user cannot scroll up. Consider the following example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html, body {
border: 0;
padding: 0;
margin: 0;
background-color: #fc9;
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.fullscreen {
border: 0;
padding: 0;
margin: 0;
background-color: #446;
color: #fc9;
position: absolute;
width: 98vw;
height: 98vh;
left: 1vw;
top: 1vh;
line-height: 9.8vh;
}
</style>
<script type="text/javascript">
//<!--
function goFullScreen()
{
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.documentElement.msRequestFullScreen) {
document.documentElement.msRequestFullScreen();
}
}
//-->
</script>
</head>
<body>
<div class="fullscreen" onclick="goFullScreen()">
--- 0<br/>--- 1<br/>--- 2<br/>--- 3<br/>--- 4<br/>--- 5<br/>--- 6<br/>--- 7<br/>--- 8<br/>--- 9<br/>
</div>
</body>
</html>
Viewing this should give me a page with an orange border all around and I should see the numbers 0-9. Clicking in the middle will make it go to fullscreen, and look the same. This works with every browser and device I tested (Firefox, Chrome, Internet Explorer, Konqueror, Dolphin, on Windows, Linux, Android) except Chrome on Android. It also works with Chrome on a desktop PC and with Dolphin on Android. My questions:
Is there a way to make Chrome on Android work like all the other browswer/device combinations? Am I missing anything?
If not, this means I have to query browser and device in the code and adjust the size differently if we're in Chrome/Android. Do you know whether other browser/device combinations show the same behaviour?
This is related to this question, but I'm happy with answers that just list other devices or that confirm this only affects Chrome/Android.
I'm trying to show a background image on an Android phonegap app using css. This is the sample HTML
<html>
<head>
<title>Login page</title>
</head>
<body style="margin: 0px; background: url("img/bg_index.jpg";) repeat scroll 50% 0px / cover transparent;">
</body>
</html>
while using this code the background image is not shown in certain android phones such as sony ericsion but in most of the android phones and also in iphone this code is working fine.
So I tried to change style as shown below
<html>
<head>
<title>Login page</title>
</head>
<body style="margin: 0px;background: url("img/bg_index.jpg";) repeat scroll 50% 0px / cover transparent; background-image: url("img/bg_index.jpg";);background-repeat:no-repeat;">
</body>
</html>
After this style applied the app launched as below in the image
How to write a background style that is accepted by all android devices and iphone
Try this:
background: url("../img/bg_index.jpg");
Simply do this:
background: url("your/path/img/bg_index.jpg");
div {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}
#first-bg {
background-image: url('http://go.sap.com/_jcr_content/par/hero_a9cf/image.adapt.subtablet.jpg/1426599556769.jpg');
background-size: 100%;
height: 600px;
background-repeat: no-repeat;
}
I need some help with displaying my background on mobile devices, the current code works on my browser but when I visit it on a mobile device the background crawls up to the top and is not visible, also the div for the other image does not react to the % i gave it. (I really have to use percents becouse it will make the site better for any mobile device)
I had this code working, but it was not in CSS but made in HTML itself, now i want to use CSS becouse you can not download the background anymore as picture.
<!DOCTYPE html>
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt.">
<style>
body#background {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-color: #e0e0e0;
background-size: 100% 100%;
}
div {
position: absolute;
top: 20%;
left: 11%;
width: 37%;
height: 70%;
overflow-y: scroll;
overflow-x: hidden;
}
div img {
width: 100%;
}
</style>
</head>
<body id="background">
<div>
<img src="text.png" alt=""/>
</div>
</body>
</html>
I used my Android phone to view the site btw.
Hope someone can help me or give me a push in the right direction.
Thank you very much!!
Either just put the background-image attribute on #background or just put it on body (in the css) no need for both. I understand you may want to contain the image, in which case you can just use the element name (#background) and set an overflow to none if the image bleeds.
If you have any more questions or need help with this, just comment and I'll set up a JS Fiddle for you.
I'm trying to make my blogs readable on an android browser, but it always ends up needing to scroll horizontally. Right now, my solution is working in chrome so that when I resize the window to a width smaller than the article content the article will shrink with it without a horizontal scrollbar. You can see an example of a blog article here.
If I do this:
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; minimum-scale=1.0; user-scalable=yes;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
#container {
max-width: 650px;
margin: auto;
}
</style>
</head>
<body>
<div id="container">Content goes here.</div>
</body>
then it works as seen here, but something else in my page is messing things up. In chrome, I'm getting the effect I want, but when I open the page on an android browser I have to scroll horizontally.
Edit: I traced this down to the facebook iframe. Anyway to get around this?
I have the same issue occasionally where android completely ignores overflow command. I think the first issue is using overflow hidden on the body, and not an internal element.
I would change:
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
#container {
max-width: 650px;
margin: auto;
}
</style>
To this:
<style type="text/css">
body {
margin: 0;
}
#container {
overflow: hidden;
max-width: 650px;
margin: auto;
}
</style>
Be careful what goes into the actual "#container" div. While it will probably display off screen, I was never able to fix a bug with object tags (flash video players). Over flow is a pain for mobile. If possible, I would develop fluid and go from there. No real need to set a max-width in that case -- and it will allow the user to browse the website as they want.