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

**URL:** <https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420>\
**Category:** Questions\
**Created:** [August 18, 2022, 12:08pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420 "2022-08-18T12:08:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Raj](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/raj/32/5127_2.png) [@Raj](https://cl.desmos.com/u/Raj)\
**Post date:** [August 18, 2022, 12:08pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/1 "2022-08-18T12:08:50Z")

</div>

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:

> **[Font size test](https://www.desmos.com/calculator/clyzhevdkf)**
>
> Font size test

Desktop view:  
 ![Screen Shot 2022-08-18 at 7.48.59 AM](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/4/4f16535837b720a282200ebb2711ae86046ed01b.png)

Mobile view:

 ![IMG_2603](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/9/93ead7f301c0c5b3a6cb23b0542e166c1a322a39.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Daniel\_Wekselgreene](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/daniel_wekselgreene/32/1819_2.png) [@Daniel\_Wekselgreene](https://cl.desmos.com/u/Daniel_Wekselgreene)\
**Post date:** [August 18, 2022, 6:18pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/2 "2022-08-18T18:18:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Raj](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/raj/32/5127_2.png) [@Raj](https://cl.desmos.com/u/Raj)\
**Post date:** [August 19, 2022, 1:55pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/3 "2022-08-19T13:55:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Daniel\_Grubbs](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/daniel_grubbs/32/719_2.png) [@Daniel\_Grubbs](https://cl.desmos.com/u/Daniel_Grubbs)\
**Post date:** [August 19, 2022, 2:20pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/4 "2022-08-19T14:20:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mike\_Gleeson](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/mike_gleeson/32/650_2.png) [@Mike\_Gleeson](https://cl.desmos.com/u/Mike_Gleeson)\
**Post date:** [August 19, 2022, 8:11pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/5 "2022-08-19T20:11:35Z")

</div>

Here’s something that might be of use: [Responsive Point Label Size](https://www.desmos.com/calculator/rg68wrjwt0)

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.

---

<div class="post-metadata">

**Author:** ![Raj](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/raj/32/5127_2.png) [@Raj](https://cl.desmos.com/u/Raj)\
**Post date:** [August 21, 2022, 4:08pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/6 "2022-08-21T16:08:03Z")

</div>

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

Raj

---

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [August 21, 2022, 7:52pm UTC](https://cl.desmos.com/t/q-display-consistency-across-mobile-desktop-e-g-font-size/4420/7 "2022-08-21T19:52:36Z")

</div>

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