3 Replies Latest reply on Feb 11, 2015 11:08 AM by Jon Tara

    How to adjust display by device font size

    simon cheesbrough

      Hi. I might have missed something but is it possible to adjust the display in line with the device font size setting. How do we get that setting? Would you then change the body font size and let any relative markup continue. Or would you use this to set an initial zoom? I am also thinking to use the volume keys to adjust the session font size/zoom. The app is currently using API 2.2.
      Any helpful suggestions are most welcome, thank you.

        • Re: How to adjust display by device font size
          Jon Tara

          Zoom is not a good solution. Zoom typically does not scale the font size, but just the pixels. If you do use zoom (maybe for some graphics) then plan to scale DOWN rather than UP for best results. That is, layout the page, for example, so that everything is 2X, and so normal view will require zoom of 0.5. Maybe some devices will scale the actual font, but it is a browser-specific implementation and everything I have encountered simply scales the pixels.


          Otherwise, it is HTML/CSS, so you can change font size. The great thing about Rhodes' HTML UI is that there is much knowledge about HTML layout, and you can leverage it. Many tutorials and blogs can be found on dealing with fonts in HTML!


          If you are using jQuery Mobile, this will not/may not (depending on version) scale other UI elements (buttons, etc.) and that may or may not be desirable to you. I am not sure about JQM 1.4, think it may offer some help, but with the default in Rhodes JQM 1.3, it will not. A client of mine re-wrote the JQM CSS (for 1.2) to scale the entire UI. Basically, re-write most pixel dimensions to ems. (Except for borders.)


          2.2 is really old, I would urge updating. I'd guess you have JQM 1.2 if you use JQM. Unfortunately JQM 1.4 is typically a huge update hurdle, because they made major changes from 1.3 to 1.4. It is much faster, though, and all of the UI elements are sized in ems, not pixels.


          You can update JQM independently from Rhodes version. However, be aware that jqmobile-patch.js and jqmobile-patch.css (as well as android.css, iphone.css) are JQM-version specific. I actually don't use any of those myself. jqmobile-patch.js is most to support wait pages, which I think are a really bad idea, anyway.

            • Re: How to adjust display by device font size
              simon cheesbrough

              Many thanks Jon for your time in reply.




              That just leaves one item – is it possible to access the font size setting on the device. Or I can just do a user setting that I store locally.


              And then when I render the page I would script in a page specific style section for body to affect the font-size? Making sure all other font sizes are em’s?


              I thought rem’s were better in case they become nested or something?







                • Re: How to adjust display by device font size
                  Jon Tara

                  I just apply font-size to <body> using a small block of CSS in the layout. We don't actually do this on the fly - it is set app-wide from a preferences page, and takes effect only when preferences are saved. We force a re-load of the document then.


                  rem is only newly-available on Android. It would be appropriate for sizing buttons, etc. if you only want the font to resize, but not the UI elements like buttons.


                  For rem compatibility, see:




                  I haven't played with changing body font size with JQM 1.4, but I don't think they use rem, and so the buttons would scale with the font. I think you might not have to modify any CSS if you use JQM 1.4.x. Really, for example, button size SHOULD change with font size. The button has to be big enough to hold the text!


                  For a new project, I would urge you to use JQM 1.4 anyway, since it is much faster, and worth the upgrade for that, but a lot of work if you have existing Javascript code and CSS overrides.