Instead of setting the height to auto, this just sets width and height to the same value. Instead of giving a single value for height and width, it uses the minimum of three different values. The first two are in viewport units. The viewport is normally 100vw wide and 100vh tall. Since there are 10 files and 11 ranks, the largest possible square width that will let the board fit on the screen is 10vw, and the largest possible square height that will let the board fit on the screen is 9.090909090909091vh, which I have rounded down to 9vh. Taking the minimum of these and the desired size gives the best size for displaying the board on the screen. On both my Android phone and the iPhone, the board is now displaying at a small enough size to remain visible on the screen in both portrait and landscape, and it is sticking close to a 1/1 aspect ratio for the spaces.
The solution that seems to be working is to use this CSS without a container query:
Instead of setting the height to
auto, this just sets width and height to the same value. Instead of giving a single value for height and width, it uses the minimum of three different values. The first two are in viewport units. The viewport is normally 100vw wide and 100vh tall. Since there are 10 files and 11 ranks, the largest possible square width that will let the board fit on the screen is 10vw, and the largest possible square height that will let the board fit on the screen is 9.090909090909091vh, which I have rounded down to 9vh. Taking the minimum of these and the desired size gives the best size for displaying the board on the screen. On both my Android phone and the iPhone, the board is now displaying at a small enough size to remain visible on the screen in both portrait and landscape, and it is sticking close to a 1/1 aspect ratio for the spaces.