On iPhone Safari, Harlowe's CSS is rendering the text too small to comfortably read and navigate. On passages that have multiple links close to each other, the small font makes it difficult to select the desired option by touch without accidentally touching the wrong link.
I've noticed some Twine authors working around this by double-spacing a list of link options at the bottom of the passage instead of single-spacing, and trying not to have links too close to each other within a paragraph...
Any tips or ideas on how to make a Harlowe Twine story detect the browser or screen size and adjust the CSS accordingly? I'd like for it to remain as-is for desktop/tablet browsers but use a larger default font size for mobile browsers with smaller screens.
Comments
You should read the Font changes size depending on how much text the passage is displaying thread and Issue 48 on the Harlowe project website.
https://developers.google.com/speed/docs/insights/ConfigureViewport
Twine isn't including this "viewport" meta tag in the HTML header:
Since Harlowe Twine doesn't currently provide a way to add header meta tags, I'm manually inserting it into the exported HTML and testing out some things now. I think it's still going to require changing/overriding Twine's default font sizing rules. Googling around for "current best practices web font size" on whether and when to use px vs pt vs em vs rem vs % is enough to drive anyone to insanity...
Twine is simply the IDE/compiler. The story formats define what features you do, or do not, get with their use.
In this particular case, some story formats include the specific <meta name="viewport" …> tag that you're referring to and some do not.
In the Twine Story Stylesheet, add:
tw-sidebar {display: none;}
This hides the "go back" arrow, which IMHO just junks things up.
The rest you have to do in the final HTML document:
Near the beginning of the HTML document, directly after the <meta charset="utf-8">
add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This keeps the browser from scaling everything down into a tiny looking font size.
Then, the slightly tricky part. Find the section in the HTML document that starts off with:
{display:-webkit and ends with display:block}
Replace the entire section (including the parts listed above) with:
{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:6.0in;font-size:1.5em;margin:5%}@media screen and (max-width: 1024px){tw-story{font-size:1.2em;max-width:6.0in}@media screen and (max-width: 896px){tw-story{font-size:1.05em;max-width:6.0in}@media screen and (max-width: 768px){tw-story{font-size:.9em;max-width:5.0in}tw-passage{display:block}
That's it! (At least it worked for me)