Trying to view webpage content on my Android phone. The phone has soft-buttons and so the page content near the bottom of the page is partially obscured by the soft-buttons.
Is there a CSS approach to adjust for the possibility of soft-buttons within the mobile web browser? Or does one set some giant margin-bottom value to the content and hope for the best?
Pic: https://i.imgur.com/9qH4s2W.png
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body
{
margin: 0;
padding: 0;
overflow: hidden;
display:flex;
justify-content: flex-end;
flex-direction: column;
width:100vw;
height:100vh;
}
</style>
</head>
<body>
<div class="content">
<img src="https://picsum.photos/100/100">
</div>
</body>
Related
I'm trying to implement full-size browser viewport scrolling using a CSS scroll-snap. But there is a problem with Chrome on Android (tested in 91 version): when the address bar shifts (at first scroll or on scroll direction change) scroll element can shake or/and scroll just partially — not to the correct element point. Please see a code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="wrapper__el" style="background: green">1</div>
<div class="wrapper__el">2</div>
<div class="wrapper__el" style="background: green">3</div>
<div class="wrapper__el">4</div>
<div class="wrapper__el" style="background: green">5</div>
<div class="wrapper__el">6</div>
<div class="wrapper__el" style="background: green">7</div>
<div class="wrapper__el">8</div>
<div class="wrapper__el" style="background: green">9</div>
</div>
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
scroll-snap-type: mandatory;
scroll-snap-type: y mandatory;
overflow: scroll;
}
.wrapper__el {
scroll-snap-align: start;
scroll-snap-stop: always;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</body>
</html>
Perhaps there are some ways to make this work smoothly and accurately using the CSS scroll-snap? At the same time, I would like to left the address bar moving in/out on Chrome on Android, as it is intended in this browser.
Please find below my code of showing responsive image:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxx</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
img {
max-width: 100%;
height: auto;
width:100%;
}
</style>
</head>
<body>
<!--<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</td>
</tr>
</table>-->
<div>
<img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</div>
</body>
</html>
Above code for responsive image works fine on iphone but when I open the page on android the image displays with a scrollbar on chrome. On firefox it works fine.
Update
The page works fine on firefox in responsive design view on desktop. It works fine on iphone. But it does not work as responsive as it's expected on android phone. On android phone, it shows scrollbars in browser and in email application as well.
How do I make image responsive so that it works on iphone, android, chrome, firefox and in an email as well ???
I have been fiddling with chrome, firefox and a custom browser on Android and with FF and chrome on a 24" screen on Windows 7 and they all show scrollbars.
Depending on the width and height of your image (actually its ratio: 3:2, 4:3, 16:9, 16:10 etc.) you will see scrollbars when resizing it on a screen with a different ratio than your image. I am not sure, but it may well be that the internal browser engines of FF and Chrome use the same kind of logic to handle image sizing (hense the same effect on Android's Webview and WebChromeClient views) and iOS does not.
You should ask yourself if it is worth all the trouble getting this issue worked out for you or simply accept it as it is (I'd opt for the last).
Have a look at the code below (download => Github renevanderlende/stackoverflow) It is not only an acceptable solution for your issue, but also adds some easy to understand Responsiveness to your page you can fiddle with!
The images in the code are from amazing Unsplash, a fantastic place to find high-quality public domain photos.
And if you are a beginner like me, a visit to Codrops really is a must. Great clear and free tutorials with awesome, ready to use code!!
Cheers, Rene
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>question-26464777</title>
<style>
div { background-size: cover; } /* fully cover a DIV background */
img { width: 100%; } /* Maximize IMG width (height will scale) */
/* Sample media query for responsive design, Resize your browser
to see the effect. DO check http://chrisnager.github.io/ungrid */
#media ( min-width :30em) {
.row { width: 100%; display: table; table-layout: fixed }
.col { display: table-cell }
}
</style>
</head>
<body>
<div class="row">
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/1.jpg" alt="image 1"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/2.jpg" alt="image 2"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/5.jpg" alt="image 5"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/6.jpg" alt="image 6"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/8.jpg" alt="image 8"></div>
</div>
<div class="row">
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
</div>
</body>
</html>
MAybe you should give a CSS code...
try it:
#media screen.... {
img {
max-width:100%;
}
}
Or you have overflowed any parent element
You have bigger the parent elements I think...
One of parent elements are bigger that phone display...check it
Try...
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow-x:hidden;
}
img, div {
max-width: 100%;
height: auto;
width:100%;
overflow-x:hidden;
}
A simple HTML page contains a div with overflow-y:auto inside of another div with overflow-y:auto. This page scrolls normally on touch devices with IOS Safari and Android Chrome browsers.
However, if I open the same page in a native Android v.4.0 to 4.3 browser and scroll the outer div, the inner div does not move synchronously with the remaining content and jumps to its place only after some delay.
The same happens if the internal div has overflow-x: auto.
Example page: http://jsbin.com/cojoluwo/1/
The code looks as follows:
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
overflow-y: auto;
}
#scroller{
height: 100px;
overflow-y: auto;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body class='sapUiBody'>
<div id='content'>
<div>
<p> some text
......
<p> some text
<div id=scroller>
<p>internal text
...........
<p>internal text
</div>
<p> some text
...........
<p> some text
</div>
</div>
</body>
</html>
Is it a bug? If yes, is there any workaround known?
there's no need for this:
#content {
height: 100%;
overflow-y: auto;
}
a scrollable div with a set overflow inside another scrollable div with a set overflow is not a good idea on mobile and since your css properties for #content are redundant and not useful, you can safely remove them and it will work
http://jsbin.com/cojoluwo/5
I have a webview that loads a webpage which includes a flex box.
The flex box Div displays correctly on Kitkat Emulator but its not working on older Android versions such as Jellybean.
Boxes must be shown horizontally but they actually shown vertically.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<div style="display:flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
width: 50%; height: 20%;
background-color: red;">
<div style="background-color: orange;">BOX 1</div>
<div style="background-color: yellow;">BOX 2</div>
<div style="background-color: green;">BOX 3</div>
</div>
</body>
</html>
I think you need to prefix everything according to the old flex box spec, like -webkit-box-flex-foo: bar;.
For direction, you might need to use orient instead, like: -webkit-box-orient: vertical/horizontal;.
Note: I'm using jQuery and jQuery Mobile.
I have a mobile page which seems to work okay in iOS, as far as respecting elements' positioning when zooming (or pinching). In Android, this is another story. Employing the Android SDK Emulator, all of my content is getting squeezed. I know there's a way to enforce that the content does not shift when zooming; I've seen it on desktop websites while using the Android browser. Disabling zooming is not the answer because I have an image on the page and I want the user to zoom in on said image.
To sum up:
I want to keep all content undisturbed when zooming (enlarging).
Thank you very much for any help.
Here is the full page (including css):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Mobile Page</title>
<meta name="description" content="This is a test page." />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#header {
background: blue bottom left repeat-x;
padding: 3px 5px 0 5px;
}
.BackBtn {
float:left;
}
.IndexBtn {
float:right;
}
.ui-body-c {
background-color: #EEF3F8;
}
.ui-btn {
font-size: 0.8em;
}
.ui-btn-inner {
padding: .6em 10px;
}
h2 {
background: silver bottom left repeat-x;
color:#333;
font-weight:bold;
line-height:1em;
clear:both;
}
h4 {
clear: both;
}
#Content #TableDiv TH, #Content #TableDiv TD {
border:1px solid;
border-collapse:collapse;
border-color:rgb(153,153,153);
}
#Content #TableDiv TD {
background:#FFF;
}
#Content #TableDiv TH {
padding: 5px;
background: #F0F0E0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
img {
clear: both;
}
</style>
</head>
<body>
<div data-role="page" id="Index">
<div id="header">
<h1>Title</h1>
</div>
Back
Home
<h2>Section</h2>
<h4 id="Article1">Article1</h4>
<h4 id="Article2">Article2</h4>
<h4 id="Article3">Article3</h4>
<div id="Content">
<div id="TableDiv">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</table>
</div>
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/200px-Rotating_earth_(large).gif"/>
</div>
</body>
</html>
Update
I figured out if I specify a set width on the page like this:
<div data-role="page" id="Index" style="width:320px;">
The zooming does not disturb the contents of the page.
But I want to maintain a liquid layout, or a fluid (hybrid) layout, at best. I can use JavaScript to specify the width of the div to the width of the device. Other than JavaScript, or setting a specific pixel (or em) width in CSS, is there an equivalent method using a liquid layout design?
Thank you.
I figured out if I specify a set width on the page like this:
<div data-role="page" id="Index" style="width:320px;">
The zooming does not disturb the contents of the page.
Unfortunately, if the orientation changes, then this won't be helpful, especially when zooming.
I suggest opening one of those desktop websites you are talking about and cheeking there hrml and css with some browser plugin . thats what i do all the time :)