8

I was making a code formatter for my website and I encountered some strange behavior between desktop and mobile browsers. On desktop the code block looks like this:

and on my iphone the line numbers are, for whatever reason, in a smaller font size:

I haven't done anything to edit any sort of font sizes anywhere on my website. It's all default sizes. If I manually set the font size, say to 12px, it is still lined up on my desktop browser, and still smaller on my mobile browser.

The code block is laid out as a table with two cells. The left cell contains a 1 column table, each row contains a number. The right cell contains a 1 column table, each row contains a line of code.

Any idea why the font is shrunk on the mobile browser?

EDIT: LINK: http://grantslatton.com/posts/blog/2013-08-16/sudoku_solver/

EDIT2: It renders correctly on windows phones and android phones.

SOLUTION: Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked :Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?

I put -webkit-text-size-adjust: 100% in the body { } section of my CSS to prevent mobile safari from messing with my text size.

7
  • 1
    Tip: Try putting some code to get answers :) Aug 24, 2013 at 21:22
  • @MohammadAreebSiddiqui Unfortunately, since the code is used for syntax highlighting, it is automatically generated by a python program I wrote and is very messy. You can see it here, I guess: grantslatton.com/posts/blog/2013-08-16/sudoku_solver
    – GrantS
    Aug 24, 2013 at 21:40
  • There are some things you can test. Try putting the website in Standards mode; it's now rendered in Quirks mode, so you may be running into a quirk of the mobile browser! The difference between the two columns is that the texts in the right columns are in <font> elements, while the numbers on the left are not.
    – Mr Lister
    Aug 24, 2013 at 21:57
  • @MrLister I had tried putting both of them in <font> tags and it had no effect. I even tried manually setting both of their sizes to 12px and the numbers were still smaller than the code. I'll try standards mode when I'm back at a computer.
    – GrantS
    Aug 24, 2013 at 22:03
  • @MrLister Update: Standards mode had no effect.
    – GrantS
    Aug 24, 2013 at 22:44

1 Answer 1

10

Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked:

I put the following in my CSS to prevent mobile safari from messing with my text size.

body {
    -webkit-text-size-adjust: 100%;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.