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.

Community
  • 1
  • 1
GrantS
  • 781
  • 7
  • 16
  • 1
    Tip: Try putting some code to get answers :) – Mohammad Areeb Siddiqui Aug 24 '13 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 '13 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 `` elements, while the numbers on the left are not. – Mr Lister Aug 24 '13 at 21:57
  • @MrLister I had tried putting both of them in 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 '13 at 22:03
  • @MrLister Update: Standards mode had no effect. – GrantS Aug 24 '13 at 22:44
  • Update: It renders correctly on windows and android phones. – GrantS Aug 24 '13 at 23:57
  • Hey, you should post that as an answer and then accept it. – Mr Lister Aug 25 '13 at 05:48

1 Answers1

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%;
}
Community
  • 1
  • 1
GrantS
  • 781
  • 7
  • 16