Automatically scaling cs-applets for mobile

[montaga]

When accessing the homepage on mobile devices, some examples in the gallery are to big for the screen. This makes scrolling impossible.

I am not sure wheather this can regulated through plain CSS, because we need a way to scale the canvases with keeping the aspect ratio. I guess it needs some work in Javascript...

[gagern]

I guess that for many applications it should be possible to achieve such an effect using media queries. Assuming that the widget itself is square, use a media query to distinguish portrait from landscape devices. On landscape devices, use 100vw, the viewport width, as the size for both directions, on portrait 100vh. If there is to be a border, use calc to subtract the border size. Not sure if this works portably across all devices, I seem to recall that there was some inconsistency whether or not vh includes the address bar or not. But it should be a good step forward for most devices.

[q2apro]

The width and height are set by Javascript in ports.

ports: [{
	id: "CSCanvas",
	//background: "#EEE",
	axes: false,
	// width: 500,
	// height: 500,
	transform: [{
		visibleRect: [-1, 7, 14, -7]
	}],
	grid: 1,
}],

width and height specify the desired dimensions for the canvas, and override any width and height attributes that element might have.

From https://cindyjs.org/ref/createCindy.html

<style>
	#CSCanvas {
		margin:0 auto;
		width:500px;
		height:500px;
	}
	
	@media only screen and (max-width: 480px) {
		#CSCanvas {
			width:300px;
			height:300px;
		}
	}
</style>

With pure Javascript:

var canvas_size = (document.documentElement.clientWidth < 480) ? 300 : 500;

CindyJS({
	scripts: "cs*",
	autoplay: true,
	ports: [{
		id: "CSCanvas",
		axes: false,
		width: canvas_size,
		height: canvas_size,
		transform: [{
			visibleRect: [-1, 7, 14, -7]
		}],
		grid: 1,
	}],
	// ...
});

does not scale the font-size and it looks like:

Font-size should be scaled with the the canvas...

Added as issue: CindyJS/CindyJS#719