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?
Related
this is a simple html + css question:
My 620px tall div with bottom: 0px is not scrollable in android-browsers - it hangs on the bottom, the top is missing and not reachable. Tested with Android 4.4.2 on my tablet (1280x800) in Firefox, Crome an "Internet"-Browser.
browser photo
This is what I want:
* the div at bottom on large not mobile screens
* the whole content scrollable on mobile screens
Here is my code:
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body bgcolor="white" text="white">
<div style="
position: absolute;
width: 900px;
height: 620px;
left: 50%;
margin-left: -450px;
bottom: 0px;
background-color: green;
">
a tall container
</div>
</body>
</html>
Thanks for your help and attention..
Try, giving position:relative; to the parent div or body in your above code.
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 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.
html chrome on pc
<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow: hidden; z-index: 6; border-radius: 50% " ondrop="drag_drop_drop(event, this)" ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
<img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="left: 0px; top: 0px; position: relative;" class="ui-draggable">
</div>
html default browser on html tablet
<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow:hidden; z-index: 6; border-radius: 50%" ondrop="drag_drop_drop(event, this)", ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
<img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" style="left:0px; top:0px; position: relative;" width="341" height="256" class="ui-draggable">
</div>
EDIT: I had a typo for the second overflow tag (I had to type the source code in manually from the tablet to here). When I fixed that, both jsfiddle's showed the image as expected, however, the android tablet still is not.
This is what it looks like on the tablet:
There is a typo in the second code snippet(html tablet)
Overflow property is set to hiden.
<div id="opening_0" style="position: absolute; left: 56.25px; top: 63.75px; z-index: 6;" ondrop="drag_drop_drop(event, this);" ondragover="drag_drop_allow_drop(event);" onclick="photos_add_selected_fid(this);">
<div id="2_opening_0" style="overflow: hidden; border-radius: 50% ">
<div id="3_opening_0" style="background-color: #bfbfbf; height: 97.5px; width: 67.5px; ">
<img src="/system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="position: static; margin-left: 0px; margin-top: 0px;" class="ui-draggable">
</div>
</div>
</div>
I basically had to create 2 more divs inside the opening_0 div. The tablet didn't like positioning other than static in the image tag.
I am testing a page with a sticky footer. On the GS4 stock browser ONLY (not visible on android chrom), I get the sticky footer floating up and down the page as I scroll up and down. The footer also seems to have a stutter-looking effect. I've tested the same page on iphone 5 and gs3. This is my CSS flow:
.bar {
background-color: #F7F7F7;
overflow: hidden;
position: relative;
font-size: 13px;
}
.bar .footer-icon-holder {
padding: 5px;
display: inline-block;
width: 5em;
}
.bar .footer-holder {
width: 100%;
text-align: center;
margin: 0 auto;
height: 54px;
background-color: #FFF;
bottom:0;
-webkit-backface-visibility: hidden;
position: fixed;
}
and the footer html:
<div class="footer" ng-controller='footerController'>
<div id = "footer" class="bar">
<div style="margin:0 auto;">
<div class="footer-holder">
<div class="footer-icon-holder" ng-click="clickPic('home')" >
<div ng-show="homeSelected">
<img ng-src={{imageOnHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
<div ng-hide="homeSelected">
<img ng-src={{imageOffHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
</div>
</div>
</div>
</div>