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.
Related
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
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 work out why my WebView app insists on keeping the margin on body. Here is my CSS:
* {
margin: 0; padding: 0;
}
body, html {
margin: 0; padding: 0;
}
iframe {
border: 0px
}
body {
overflow: hidden;
margin:0px;
}
...and here is what I see: (the top and left both have a visible 8px margin around it)
..and here is what I see in the DOM:
I'm baffled as to why its showing margin: 8px, even when I've specifically told it NOT to have a margin on *, body and html.
I must be missing something silly - but I can't for the life of me find it.
Interestingly, if I check the page via a browser, the margins are fine:
It literally seems to be an issue with Android's WebView, verses a general CSS cross browser issue.
Ok, well I would never have thought of this to start with. The problem seemed to be with the fact that Android/PhoneGap/whatever, didn't like the fact I was using an inline style:
<style>
...
</style>
Instead, it wanted me to put all the CSS into a proper .css file, and then link it via:
<link rel="stylesheet" type="text/css" href="./css/style.css">
What a waste of my time - but at least its working now!
I overlooked all the web ( i guess) and tried to find the solution for this task:
I have all requirements to show a correct content on mobile(I mean meta media and css media and so on), but on my android phone I can scroll to the right. I checked if there are no divs with width more than 320px. Website I'm talking about is http://vasiliib.p.ht/leverage/
I tought this is cause my page content and created a separate page http://vasiliib.p.ht/leverage/mobile.html. Here I inserted simple html code. And, there is the same problem..
I am frustrated .. Please clean my eyes..and show me my mistake, please..
looking forward for your reply.
regards.
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
This is the correct answer. It works perfectly.
body{
margin:0px;
}
should read:
body{
margin:0 auto;
}
Where are you handling you're responsive design stuff?
Also this:
.bg-course-content-02 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-02.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
This:
.bg-course-content-04 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-04.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
and this:
.bg-course-content-06 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-06.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
check your widths..
Have you included the meta tag inside the head tag of the HTML?
<meta name="viewport" content="width=device-witdh, initial-scale=1">
that meta tag set the width of the page to the width of your device.
It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)