Fixed-width text and WordPress on iPhone/iPad

A quick note to cheer that I fixed an annoyance with my blog rendering on the iPhone/iPad platforms.

Text in code blocks or preformatted (i.e. fixed width) came out huge on the iPhone and iPad making things look ridiculous. It seems the WordPress Twenty-Ten theme (or derivatives of it) explicitly super-size fixed width text on these platforms.

The fix is to edit style.css in whatever theme you’re using and comment out the styling as below:

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */
/*
pre {
    webkit-text-size-adjust: 140%;
}
code {
    webkit-text-size-adjust: 160%;
}
*/

I suspect there is good intention in the Twenty-Ten theme’s style, but as I also have the SyntaxHighlighter plugin installed, things conflict and go awry.

This solution was gratefully lifted from the WordPress Answers web site.

This entry was posted in blogging. Bookmark the permalink.

Comments are closed.