One of the things I noticed when writing Hallowmoor is that the sidebar didn’t scale with the rest of the page. Stretching the page on my iPhone resulted in the text (passages) area overlapping the sidebar, making things unreadable. I spot-checked this with some Twine IFComp entries and noticed the same thing.
By default, the sidebar div in the Sugarcane theme is set to a “fixed” position. That’s what causes the problem. It can “kind of” be a good thing if your sidebar links should always be visible and you’re playing in a full-sized browser, because the sidebar won’t move even if the story text for a given passage is long enough to require scrolling. But it looks bad in mobile Safari.
The fix is easy though. Just add a passage called anything (ex: Styles) and give it a tag of stylesheet (all lower case). Inside this passage, you can change the behavior of the sidebar div:
#sidebar { position: absolute; }
If you already have a stylesheet passage, just add that bit. You could also hide the sidebar altogether (change “position: absolute;” to “display: none;” – but then you’ll probably need to change the body and passages margins so that it doesn’t just leave a large gap on the left).
By doing this, your Twine games will be a little more playable on iPhone.