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.
Related
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>
My HTML has several inner divs with display: inline-block inside an outer div with text-align: center;. This is the expected behaviour: in a big screen, some divs will show up side by side (how many depends on the size of each inner div and the outer div) and the set will be center aligned. When the screen width gets narrower the divs will re-position, and in a small smartphone screen we'll have only one div per row, center-aligned.
This is my MCVE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Align center</title>
<style type="text/css">
body {
background-color: white;
}
div.container {
margin: auto;
max-width: 1000px;
text-align: center
}
div.block {
margin: 4px;
display: inline-block;
width: 320px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
If you change the size of the window you'll see the divs repositioning (SO snippet is quite small to see this behaviour, but you can click "full page" and resize the window).
My problem:
In smartphones there is just 1 div per row, and this is exactly what I want. But my problem is that the div is not center aligned on iPhones, despite being perfectly aligned on Android phones.
Using the code above, this is the result in an Android phone, you can see that the white margins are the same on left and right:
But now on an iPhone:
The div is slightly positioned to the right.
What can I do to center-align the divs?
Note 1: I wrote Android and iPhone in the question's title because I'm not sure if this problem depends on the OS (Android vs iOs) or on the browser (mobile Chrome vs mobile Safari). I don't think this is a Safari problem, because the divs are OK on iPad and MacBook.
Note 2: It may not be an "alignment" problem: on iPhone, it's like the div was not "compressed" to fit the screen.
Add this in your head tags,
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Remove div.container from your css
Change block css to
.block {
width: 100%;
height: 400px;
background-color: green;
display: flex;
justify-content: center;
align-content: center;
}
if you want to show the blocks 3 at a time in 1 row in full screen:
<div class="container">
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
</div>
im building and app for android that use google maps embed with i frame all this on intel xdi plus cordova on html5 the problem is sometimes the apk show all black and it didn't show the map or is not well centre sometimes looks all fine but is like random pls some advice so fix that
<html>
<head></head>
<body>
<style>
.wrapper {
position: relative;
padding-bottom: 165%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 93% !important;
}
</style>
<div class="wrapper">
<iframe src="http://mapbuildr.com/frame/hc0v2v" frameborder="0"></iframe> </div>
</body>
</html>
Some old android devices dont initialize height and width immediately, try loading map after Cordova deviceready event is fired, here is sample code I tested, this loads the iframe src after deviceready event is fired:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.wrapper {
position: relative;
padding-bottom: 165%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 93% !important;
}
</style>
<script src="cordova.js"></script>
<script>
document.addEventListener("deviceready", function(){
document.getElementById("map").src = "http://mapbuildr.com/frame/hc0v2v";
}, false);
</script>
</head>
<body>
<div id="mapa_2" class="upage-content vertical-col left hidden">
<div class="wrapper">
<iframe id="map" src="" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
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 :)