4

The code block in my answer Deleting Lines after reading them in C++ program using system() shows with strange indentation in Safari on iPhone, but looks OK in other places. It was entered using Firefox, not on the iPhone, and as far as I can see it is correctly formatted. Am I doing something wrong?

This is a screenshot from my iPhone:

Screenshot from iPhone

It looks OK in other browsers, such as in this screenshot from Firefox on Linux:

Screenshot from Firefox on Linux

EDIT: It seems to be a JavaScript thing. With JavaScript off it shows correctly. With JavaScript on, when I open the page (using the link above) it briefly shows the correct indentation, then changes to the wrong one.

Improve this question
7
  • I cannot reproduce this; not on my iPhone 5 with iOS 7.0.4, in either Mobile Safari or with Chrome for iOS. There is nothing special about those lines either; they just use regular spaces for indentation.
    – Martijn Pieters
    Commented Jan 15, 2014 at 12:16
  • If you click "full site" on the iPhone, do you see it correctly?
    – Shadow Wizard
    Commented Jan 15, 2014 at 12:55
  • @Shadow Wizard: I believe I am already using the full site, and not some mobile version. It looks like the normal Stack Overflow site, and I see no "full site" button to click.
    – Thomas Padron-McCarthy
    Commented Jan 15, 2014 at 12:58
  • Oh, so click the "mobile" link in the footer. What you see after this?
    – Shadow Wizard
    Commented Jan 15, 2014 at 13:04
  • @Shadow Wizard: In the mobile version it looks okay, even with JavaScript on.
    – Thomas Padron-McCarthy
    Commented Jan 15, 2014 at 13:09
  • So I wouldn't put too much into this, just use the mobile version when browsing questions.
    – Shadow Wizard
    Commented Jan 15, 2014 at 13:10
  • @Shadow Wizard: Okay, certainly a minor problem.
    – Thomas Padron-McCarthy
    Commented Jan 15, 2014 at 13:11

1 Answer 1

Reset to default
3

This seems to be a caused by Prettify, which is the code highlighter used by StackExchange. I ran into this same issue on a personal website, and since this is the top Google result for various searches related to the issue, I felt like leaving an answer here would be helpful.

As it turns out, Mobile Safari (and other browsers) have features where they increase the font-size of non-mobile websites to make them more readable. This feature is enabled by default, which results in the weird indentation you're seeing. This also explains why your code looked fine on the mobile version of the website, since the rule was ignored there.

This feature can be disabled by adding the following rule to the website's CSS:

pre {
    -webkit-text-size-adjust: 100%;
}

With that being said, a more proper solution would be to actually make the website responsive, since this rule results in pre-formatted text being quite small for mobile users. Additionally, other browsers handle font boosting differently, so this won't necessarily fix the issue for other browsers (if they're even encountering the issue to begin with).

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .