NSHipster/nshipster.com

Viewport locking on iPhone makes tables unreadable

swizzlr opened this issue · 3 comments

swizzlr commented

Posting from my iPhone, so I can't take a picture, but this week's NSHipster is a good example of the problem.

xinsight commented

Two possible solutions:

  1. Reduce the font-size for the mobile style sheet: table { font-size: 50%; }. Easy fix, but no guarantee that the entire table can actually be viewed.
  2. Wrap each table in a div. <div class="tableWrapper"><table>...</table></div> Define mobile css: div.tableWrapper { overflow-x: scroll; } This will allow the reader to horizontally scroll.
swizzlr commented

👍

mattt commented

At some point in the past, I added CSS rules to allow for scrolling of over-sized table and code content on mobile. I'll continue to look into better solutions for this. Cheers!