IOS – iPhone/iPad “Reader” mode distorts presentation of or doesn’t show content

iosipadiphonesafarisafari-reader

http://jsfiddle.net/verbatim/fng4ef4k/

http://jsfiddle.net/verbatim/yg8amddu/

I have a contact us page. It has the usual information: Write, Call, Fax, Email, Web.

I am checking my pages with iOS Simulator.

The Reader mode of Safari on iPhone/iPad seems to distort or delete content on the page.

Desktop Safari Reader mode does not seem to have these problems.

Both of the Fiddles above have very similar markup. Yet the first example hides all the contact details in Reader mode. The second example changes font sizes on some contact info and has formatting I do not like and would like to change, but cannot seem to figure out how to.

Can anyone please provide some guidance on the best way to revise my markup to overcome this issue?

Any help is much appreciated.

Best Answer

I'd suggest you disable Safari reader view for the page in question. See https://stackoverflow.com/questions/2999600/how-to-disable-safari-reader-in-a-web-page