Q: Display consistency across mobile + desktop, e.g. font size

Questions
1

Dear Desmos folks,

I am trying to make a math game that works and looks good on mobile phones. After having spent last year teaching teenagers, I have realised that making activities that only work on laptops but not on mobile is a bit like making documents that can only be sent by fax. For teens, their phone is their world, and their laptop is a big clunky thing that they are sometimes forced to use for schoolwork. However, we old folks (born pre-2000) do almost all of our development on desktop machines, i.e. from the wrong perspective.

Desmos can definitely detect which platform it is running on, as it displays “Mobile screen might be too small” warnings. Is there a way to access that info via the CL, so that a display can be adjusted so that it looks good, regardless of which platform it is running on?

Even better would be if the display did not vary between platforms. This is especially noticeable with font-size and line-thickness, neither of which seem to scale with display-size. Although there are some advantages to this non-scaling, I think the disadvantages are bigger. Display items end up looking completely different.

For example, here are screenshots of the exact same Desmos graph, shown on the standard default zoom on the desktop and mobile-app versions:

Desktop view:
Screen Shot 2022-08-18 at 7.48.59 AM

Mobile view:

IMG_2603
IMG_2603843Ă—513 88.1 KB

As you can see, the alignment and scaling are completely different. I think that the displays would be the same if the rendered fonts were replaced by rasterized images of the words, but that would be much less flexible, e.g. if you want the text to update to reflect the value of some variable.

I would be very grateful for any help on how to make displays consistent across mobile and desktop. Even if they remain inconsistent, it would be great if there were a one-click way to simulate mobile-display while working on a desktop machine, as it’s very difficult to do Desmos coding on a tiny phone keyboard. Also, sticking my neck into into stuff that really is none of my business, I think that getting things to look and work better on mobile is the single most important thing that Desmos should focus on, if the aim is increasing usage in the target audience of school-kids and teenagers.

Many thanks,

Raj

2

I know what you mean. I haven’t tried playing around with this, but do you know about the width and height special variables? They return the dimensions of the graphing window. So I wonder if you could make the font size a function of those?

3

Thanks! I did not know about the width and height special variables. Those are useful to know about, and they do indeed sound like they might be paths towards a solution. I will explore them, so thanks!

Raj

4

As to positioning, you can set where you want labels to appear in relation to the point. The center default will auto-position, but you can choose a specific direction. If, for example, you wanted them just right of the axis as in the first pic, make your point on (or close to the axis) and in the long-click menu where you’d change point color select the right arrow for placement.

5

Here’s something that might be of use: Responsive Point Label Size

It clamps the font-size between a lower bound, an upper bound, and a function of the window-size.
Alter to taste of course, but this ensures the font-size never gets too small or too large, but does allow it to breathe when resizing the window.

1 Like
6

Thanks, that’s a nice demo! Also, I didn’t know you could set a label as editable text!

Raj

1 Like
7

Labels as editable text is an unsupported feature and we recommend strongly against using them.

1 Like