Changing the size of MathJax text for mobile friendly version

[Kyle Brown]

I have been using this page by Murray Bourne to create a bit of a template for mobile responsive graphs. I have it working fairly well, however, I would like to scale down the size of the MathJax text for smaller screens. I have tried to follow Murray's suggestion to resale a point:

NOTE: You may also need to update point sizes (and possibly for other elements as well) when resizing, something like this:

cellSize = window.innerWidth/400;

for (el in board.objects) {

if (JXG.isPoint(board.objects[el])) {

board.objects[el].setAttribute({ size: cellSize.toFixed(0) });

}

} 

However, I can't seem to even get this to work for a point. Is this the right approach? Is there a way in the attributes of the text element to create a condition to change the size of the text if the screen size is less than 400px? 

Thanks!

[Murray]

Hello Kyle

I amended the page just now with a working example of the changing point size code. You can see it on the graph at the end of Example 3: https://bourne2learn.com/math/jsxgraph/jsxgraph-examples.php (You may need to refresh the page to see the change.)

As for changing the font sizes, I'll leave that to Alfred to address.

Regards

Murray

[Alfred Wassermann]

Would it be sufficient to set the fontSize attribute?

Here is an example, see it live at https://jsfiddle.net/qzhjmky0/

var fs = board.create('slider', [[0.5, 4], [4, 4], [8, 12, 32]], {snapWidth: 2});
var txt = board.create('text', [1, 2, '\\[ \\int \\frac{dx}{x} \\]'], {parse: false, useMathJax: true, fontSize: ()=>fs.Value()});

Best wishes,

Alfred