I do not work with intel XDK long. I'm making a game and I want the canvas was stretched across the screen on any phone. I tried this
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
In the emulator, it was fine. But on my Android (Nexus 7 G) was only the page background. Canvas disappeared!
Try initializing canvas inside after DeviceReady is fired, the width and height may not be initialized before the intel.xdk.device.ready is fired.
Here is the modified code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); margin:0; padding:0; }
input, textarea { -webkit-user-select:text; }
html, body { background-color:red; color:black; width:100%; height:100%;}
canvas{background-color: #f00; position: relative; display:block;}
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
initCanvas();
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function initCanvas(){
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
</script>
</head>
<body>
<canvas id="game"></canvas>
</body>
</html>
With Intel XDK, having the <canvas id="game"></canvas> is optional, you can access the canvas object directly via intel.xdk.canvas.
Moreover, the canvas is always fullscreen, you don't need to stretch it yourself.
So, your problem might be related to something else, and you have to show us a sample of your code so we can help you.
Related
I need consume my WMS on leaflet and display it in web view. When I open my leaflet app in broser is pretty pure and readable. When same code run in android, it is much worst readable. I've tried add detectRetina: true to wms layer, but text was very small, and worst readable as now. On the images you can see differents.
Here is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEaflet</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body style="padding:0; margin:0; height: 100vh; width: 100vw;">
<div id="map" style="height: 100vh; width: 100vw;"></div>
</body>
<script src="leaflet/leaflet.js"></script>
<script>
var map = L.map('map', {
minzoom:13
}).fitWorld();
var wmsLayer = L.tileLayer.wms('http://10.0.2.2:8080/geoserver/TEST/wms?', {
layers: 'TEST:MyBaseLayer'
//detectRetina: true
}).addTo(map);
</script>
</html>
You will have to resort to the trick of having tiles double the size, with a zoomOffset of -1, i.e.:
var tileLayer = L.tileLayer(tileUrlTemplate, {
tileSize: 512,
zoomOffset: -1
}).addTo(map);
Check the Leaflet documentation for L.TileLayer about those options. They apply to L.TileLayer.WMS as well.
I has a problem with the new implementation of webview for android 4.4+.
My HTML code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.videos.globo.com/p2/j/api.min.js" type="text/javascript"></script>
<style type="text/css" media="all">
#player-wrapper, #image-wrapper {
width: 100% !important;
height: 100% !important;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#image-wrapper {
z-index: 999;
background-color: white;
}
</style>
</head>
<body>
<div id="player-wrapper"></div>
<img id="image-wrapper">
<script type="text/javascript">
var element = document.getElementById('player-wrapper');
var image = document.getElementById('image-wrapper');
var player = new WM.Player({
autoPlay: true,
width: 640,
height: 360
});
player.attachTo(element);
image.onclick = function() {
player.playVideo();
image.style.visibility = 'hidden';
};
</script>
</body>
But the rule width: 100% is not working, the # player-wrapper is getting bigger than the webview. Strange that only the #player is being affected, #image are right.
Can anyone help me with this?
The problem lies in the WM.player constructor, which sets the width of the player to 640px, which is probably bigger than your viewport. There is no parameter for max-width in the WM.Player constructor, so you'll have to use a meta tag. Trying adding <meta name="viewport" content="width=640px"> in the head section of your HTML so that the viewport is sized to fit the 640px width set in the WM.Player constructor.
This html tag might be useful.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I am creating a game where html5 canvas is taking up the entire screen.
But when I use the
<meta name="viewport" content="width=device-width">
tag, the canvas gets pixelated badly on the newest Chrome for Android.
I have created a simple test (available here):
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
radius = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
radius = (canvas.width < canvas.height) ? canvas.width / 3 : canvas.height / 3;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();
}
</script>
</body>
</html>
It draws a red dot in the middle of the screen. This works great everywhere except the Chrome for Android. Which renders this.
Anyone knows what's going on?
The problem you are experiencing is due to a change in Chrome for Android where Antialiasing was switched off.
This bug outlines the problem:
https://code.google.com/p/chromium/issues/detail?id=285066
It seems to be back to it's original state in Chrome Beta.
I am new one Android..i created one project in Html...it is running perfectly what i want..i want to run this html project in android emulator..i dont know what is the reason..... Design is came in Android emulator....but drag and drop is only not working in android Emulator.. i have used phonegap to run the html code..if u know pls tel me..Thanks in advance..
This is my Html(jquery code)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by scaillerie</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
});//]]>
</script>
</head>
<body>
<div class="component">Element 1</div>
<div class="component">Element 2</div>
<div class="ui-layout-center"> </div>
</body>
</html>
Unfortunately, jQuery UI doesn't work properly with touch events. There are, however, a number of plugins to enable touch in jQuery UI, Touch Punch is one: http://touchpunch.furf.com/
You should also consider updating the version of jQuery you're using...v1.4.4 is 3 years old now.
I am building one AudioBook android application using corona sdk. I am stuck with mp3 streaming.
Please help me.
Refer this website
Try this HTML5 code:
<head>
<title>Radio</title>
<meta name="viewport" content="maximum-scale=1, minimum-scale=1,
width=device-width, user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html { -webkit-text-size-adjust: none; }
body {margin: 3px 3px 3px 3px;}
</style>
</head>
<body>
<audio id="audio" controls autoplay src="http://oggvorbis.tb-stream.net:
80/technobase.ogg;"></audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>