Ios iphone 15.4.1 16px font-size recommendation

#1

(tested ios 15.4.1, 14.3; iphone 12 mini, iphone x) NB only occurs on iphone, not ipad

if font-size is set to less than 16px (tiddlywiki.com default is 14px) then ios zooming occurs automatically in text boxes

this is unwanted behaviour for most (but not all) users as it does not autozoom out, the user must manually zoom out every time they have finished using a textarea (can be frustrating as tiddler close button etc. goes offscreen, ui feels “unstable”)

to workaround this, use quine’s “disable zoom” option (which disables all zooming) or set your tiddlywiki’s default font-size to 16px (sidebar|control panel|appearance|theme tweaks)

this is important for new and potential users as they might assume this is a bug in tiddlywiki rather than “normal” iphone behaviour.

visitors to our tiddlywikis on the web will also be affected if they use iphones

apparently this is a longstanding “feature” on iphone, so apple will probably will not change for the forseeable future

maybe someone knows a good solution? e.g. html - Prevent iPhone from zooming form? - Stack Overflow

1 Like
#2

has some good gifs showing the issue

#3

Hi @makiaea ,

apparently we can do this for iOS devices using Safari:

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"], textarea
    { font-size: 16px; }
}
1 Like