Single Comment

There is an aspect-ratio style, but it seems to be ignored. When I use aspect-ratio:1/1 in the style of the td elements of the board, instead of specifying a height, I get this:

Here none of the dimensions of the table was 'under pressure'. But it seems to base the row heights on what is needed for the coordinate font in the left board margin, rather than making it equal to the width as requested.

This could be a problem associated with the board being generated by the JavaScript rather than being in the original page source.

[Edit] The problem seems to be more fundamental. The entire Diagram in the case above was again within a cell of a larger table and a div within that. These HTML elements were present in the originally loaded page. But if I request some aspect ratio for those (and leave the board cells with specified height), it also is ignored.

[Edit2] It seems I finally found something that does have an effect. In the routine Display(), for displaying the current board position, where it loops over all squares to specify their new background image (i.e. the piece), I can put

cell.style.height = cell.clientWidth;

This adapts the height to the actual width that the browser gave to the td table cell. The problem is that it doesn't work when you merely resize the browser window (as no JavaScript is called by doing that). But the next time you click in the board this will trigger a call to Display(), and restore the aspect ratio of the squares. If the browser window was already narrow when the page gets loaded (as should be the case when you view the page on a phone), the proper aspect ratio will be used immediately.

I suppose it should be possible to attach an event listener to the page that would call a handler on resizing; If this handler would call (or be) Display(), I suppose it would even adjust the height when the width gets squeezed by a resize.

[Edit3] OK, I now uploaded a betzaNew.js script that does this (including the resize handler). Flush the browser cache to test it.