Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>More Information than Real Solution</h2> <p>Based on my understanding of how things work according to <a href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html" rel="nofollow">this page</a> and <a href="https://developer.mozilla.org/en/CSS/text-size-adjust" rel="nofollow">this page</a>, all text will get refactored in landscape mode based on either <code>-webkit-text-size-adjust: auto</code> (the default for iOS) or by your setting of <code>-webkit-text-size-adjust: 100%</code>. </p> <p>I do not believe the <code>100%</code> setting is doing what you may think it is doing (an attempt to keep the text size the same). Rather, it is only affecting "how the text-inflating algorithm is applied" (per <a href="https://developer.mozilla.org/en/CSS/text-size-adjust" rel="nofollow">this page</a>). I have not been able to track down exactly what that might mean; that is, what does <code>100%</code> mean with respect to the inflation algorithm. My guess is, based upon <a href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html" rel="nofollow">this page's</a> quote...</p> <blockquote> <p>The first time a webpage is rendered, Safari on iOS gets the width of the block and determines an appropriate text scale so that the text is legible.</p> </blockquote> <p>...that since the procedure happens only "the first time a webpage is rendered" that once the device is turned from portrait to landscape the inflation algorithm will "grow" the text based off the width change of the screen being wider, even when set at <code>100%</code>.</p> <p>Perhaps this is because <code>100%</code> is in relation to the width difference of portrait to landscape. For example, <a href="http://www.apple.com/iphone/specs.html" rel="nofollow">this iPhone spec</a> is 960 x 640. It may be that <code>100%</code> means the inflation uses some direct relation of 960 x 640 (say, 960/640 x 100%), working out to be 1.5, which is then causing the "boldness" of the landscape text. If such is the case, then theoretically the <code>-webkit-text-size-adjust</code> would perhaps need to be set to <code>66.67%</code> to keep it unaffected (returning the 1.5 factor to a 1). <strong><em>But I'm not convinced that it is so straight forward.</em></strong></p> <p>Ultimately, I think Andrey Bukati's answer of <code>-webkit-text-size-adjust: none;</code> is the only guarantee that no change in text sizing will occur. But it can have other, perhaps undesirable, affects.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload