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.
Related
I'm trying to print the text inside the div on android chrome
This works on windows 10 chrome
but on android chrome, it prints, but shows the whole page
with header and print button.
Any help appreciated
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
docunt.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</head>
<h2> Test print </h2>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<body>
<div id="PrintMe" >
<p>
I'm trying to print the text inside the div on android chrome<br>
This works on windows 10 chrome <br>
but on android chrome, it prints, but shows the whole page<br>
with header and print button.
</p>
</div>
<button id="print" onclick= "printDiv('PrintMe')" > Print </button>
</body>
</html>
Are there any libraries for panning audio left or right in Cordova/Phonegap/Ionic? Ideally, I would like to have a sound file and play it out of either the left or right headphone channel but not both.
I have looked at the cordova-media-plugin, cordova-native-audio, cordovoa-audioToggle, and soundJS/createJS. Of these, only soundJS & createJS seems to be able to control the headphone output and panning, but it doesn't seem like it works with Cordova. Also there are no examples for angular / cordova.
On Android 6.0, the following script works. It makes use of the Web Audio API. I have not yet tested it on iOS, but I have a good feeling it will work there (please comment if it does not).
You need an "omg.mp3" file in your root directory to test with. You also should build using Cordova and not worry about the CORS or Same-domain error you might get in your browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>StereoPannerNode example</title>
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>StereoPannerNode example</h1>
<audio controls>
<source src="omg.mp3" type="audio/mp3">
<p>Browser too old to support HTML5 audio? How depressing!</p>
</audio>
<h2>Set stereo panning</h2>
<input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
<span class="panning-value">0</span>
</body>
<script>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);
// Create a stereo panner
var panNode = audioCtx.createStereoPanner();
// Event handler function to increase panning to the right and left
// when the slider is moved
panControl.oninput = function() {
panNode.pan.value = panControl.value;
panValue.innerHTML = panControl.value;
}
// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);
</script>
</html>
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 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.
I am working on a web app which has a width of 640px.
In the document head I set
<meta name="viewport" content = "width=640, user-scalable=no" />
so the content is nicely displayed and stretched horizontally.
This works perfectly on iOS but in Android the browser opens the website zoomed in so the user has to double click to zoom out and the entire page.
When I change the viewport setting to leave out the user-scalable tag like this:
<meta name="viewport" content="width=640" />
the Android browser adjusts nicely to the 640px - so it works.
The problem however now is, that users can zoom in and out on Android and iOS since the user-scalable tag is not set.
How can I forbid the scaling and at the same time set the viewport width to 640px on Android?
Trying rendering the viewport meta tag like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.
UPDATE: I was able to fix my bug for android devices all together by setting the below:
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.
I wanted mobile to always show a website 640px wide because of a design that would break otherwise. (a design I did not make..) Thereby I wanted to disable zooming for mobile users. What worked for me me is the following:
- UPDATED 2013-10-31
First of all, there is no way you can do this without Javascript. You will have to check the user agent string. Therefore I created a mobile-viewport.js and included the script just before the closing tag:
function writeViewPort() {
var ua = navigator.userAgent;
var viewportChanged = false;
var scale = 0;
if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
// targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
if (webkitVersion < 535) {
viewportChanged = true;
scale = getScaleWithScreenwidth();
document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
}
}
if (ua.indexOf("Firefox") >= 0) {
viewportChanged = true;
scale = (getScaleWithScreenwidth() / 2);
document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
}
if (!viewportChanged) {
document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
}
if (ua.indexOf("IEMobile") >= 0) {
document.write('<meta name="MobileOptimized" content="640" />');
}
document.write('<meta name="HandheldFriendly" content="true"/>');
}
function getScaleWithScreenwidth() {
var viewportWidth = 640;
var screenWidth = window.innerWidth;
return (screenWidth / viewportWidth);
}
writeViewPort();
The script checks if the visitor has an android (not chrome) or firefox browser. The android browser does not support the combination of width=640 and user-scalable=false, and the firefox browser does have a double screen width for some strange reason. If the visitor has a windows phone IE browser MobileOptimized is set.
I had the same situation, if you want the content to always fit the screen width without allowing the user to zoom in/out, use the following meta tags (this will work no matter what width you give)
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />