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>
Related
I am trying to render an image as html in webview of android but not able to calibrate it correctly in mobile, original image gets cropped both left and right using below code. how should I fix this and how to know if it will render fine on mobile (by running in browser only) ? below is what I am doing.
image dimensions are:(624*936)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
/>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%">
<div
onclick="surface.touch()"
style="
background: url(https://image/startBackground_1)
center center fixed;
background-repeat: no-repeat;
height: 100%;
background-size: cover;
display: flex;
justify-content: flex-end;
flex-direction: column;
font-family: 'Noto Sans', sans-serif;
"
>
<div
style="margin-bottom: 100%; margin-top: 100%;"
></div>
</div>
</body>
</html>
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.
I have a page with the following simple markup:
<!DOCTYPE html>
<html>
<head>
<title>embed example</title>
<style>
.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/238498461&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true">
</iframe>
</div>
</div>
</body>
</html>
It looks great on my pc:
http://i.imgur.com/ZQSYBSD.png
However, when I try loading it in Chrome on my Android phone, the content inside the iframe fails to resize to the iframe dimensions:
http://i.imgur.com/u6FQW88.png
How can I get it to look the same way on my phone as it does on my pc?
I have created a local HTML page that I want to display in fullscreen in my Android app.
What happens now is that the page opens correctly in a desktop browser, but looks zoomed in my Android device (Google Glass).
My res/layout/webview.xml is the standard:
<?xml version="1.0" encoding="utf-8" ?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"></WebView>
My HTML file is as follows:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cover</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="container">
<div class="photo card">
<img src="img/cover.png">
<footer class="footer-cover">
</footer>
</div>
</div>
</body>
The img/cover.png is has the size of the Glass display: 640x360. Also, the app only needs to work in one device (Google Glass), so the CSS describes most sizes in pixels:
* {
margin: 0;
padding: 0;
border: 0;
font: inherit;
}
div.card {
width: 640px;
height: 360px;
display: block;
overflow: hidden;
position: absolute;
background-color: #000;
color: #fff;
}
div.card a {
text-decoration: none;
color: #00fcff;
}
footer {
margin: 0 40px 28px 40px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
font-weight: 600;
font-size: 24px;
line-height: 1.4em;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
footer.footer-cover{
left: 0;
margin: 0;
background-color:#00293F;
min-height: 100px;
padding:0 40px;
}
Since there is no fillViewPort for WebView, you can try using
getSettings().setUseWideViewPort(true);
to load the content zoomed out.
I have a scrollLeft function on a header so it is fixed vertically but scrolls horizontally. There is a bug in chrome for android where the header scrolls horizontally twice as fast as the rest of the page.
If I view this example in chrome for android it works as it should.
jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#header {
height: 40px;
width: 900px;
background-color: red;
position: fixed;
z-index: 2; }
#content {
height: 1000px;
width: 900px;
background-color: blue;
top: 50px;
position: absolute;
z-index: 1; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
$('#header').css('left', 8 - $(this).scrollLeft());
});
});//]]>
</script>
</head>
<body>
<div id="header">This is a fixed header that scrolls horizontally</div>
<div id="content">This is blah blah blah blah</div>
</body>
</html>
When I implement the code on a basic page as this page, the bug appears.
simple jsfiddle page
Somehow jsfiddle gets around the bug.
Changing
$('#header').css('left', 8 - $(this).scrollLeft());
to
$('#header').css('margin-left', 8 - $(this).scrollLeft());
and setting the fixed element to left:auto !important;
has resolved the issue!!!