Responsive and text sizes

Freeway
21

Try looking at this… Flowtype.js: font-size and line-height based on element width ow.ly/oJdyu

–

David Owen

On 11 Sep 2013, at 14:42, Walter Lee Davis email@hidden wrote:

When you lengthen a line of text (physically lengthen it, that is) without also adjusting the leading and/or font size, you end up with a lot more words on a line than can be comfortably read. The eye frequently gets lost on the return trip to the next line, and reading speed and comprehension plummet.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

I spent some time this morning looking into the “text zooming on mobile Safari on rotate to landscape”, and I’ve tossed together a solution.

  1. In the document setup, go to the mobile tab and replicate these settings:

  • ViewPort width = Device Width
  • ViewPort Height = None
  • Page can be Scaled on mobiles = checked
  • Initial Scale = 100%
  • Minimum Scale = 25%
  • Maximum Scale = 160%

Then, this line needs to be added to the CSS:

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

The result is that the text won’t enlarge in mobile Safari when you rotate the device, yet you can still pinch to zoom and ⌘+ to zoom the text in desktop Safari.

You’re welcome.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

Hi Caleb

I’m with you. Setting the initial scale to 100% (which happens by default anyway), doesn’t stop mobile Safari from scaling text. Only this does:

-webkit-text-size-adjust: 100%;

Thanks Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options