cancel @cancel@merveilles.town

@neauoire not relevant to my former problem anymore, but in case you're interested,

@media (max-width: 415px) and
(orientation: portrait) and
(pointer: coarse) {
...
}

detects iPhones (in vertical orientation) reliably and skips iPads and desktops (with any window sizing)

@neauoire is the XCode one better for web previewing? my XCode is pretty old and I can't update it...

@neauoire ah, no. I was using the responsive design simulator in Safari.

@somnius we got it sorted by me just making the font size bigger in general. thanks for the help :)

@neauoire oh, bonus question. i'm on macOS 10.12. the phone simulator in Safari doesn't seem to report (pointer: coarse) in the version i have. does it do it for you? (it does seem to do it in chromium)

@neauoire thanks for the feedback

@neauoire well, i guess that takes care of this problem. hopefully i won't ever need to know the physical DPI for some different reason :P

@neauoire 11pt seems ok on phone too? then i wouldn't need a second case for phones

@neauoire maybe i'm just weird. i guess i should change it to 11pt.

@neauoire @somnius at 9pt it appears to be the same size as system text on both mac and windows for me. and it scales up and down correctly if the user changes it with the web browser controls. maybe line-height should be set to 120%~140% though?

@neauoire @somnius yeah it seems quite small on my iPhone. it's readable for me but not comfortably. it's specified as 9pt both on phone and desktop. i think it should probably be 11pt (or something) on phones.

@neauoire @somnius main problem with doing that for text size is that it will make the text larger on bigger iPads, where it's probably not necessary to do so.

@neauoire @somnius if you view that codepen link on an iPhone you'll see the links have extra spacing between them compared to desktop

@neauoire @somnius it looks like (pointer: coarse) could be used to do it for iOS... this version uses (pointer: coarse) to add extra spacing to the menu links. i could also "abuse" it to enlarge the overall text size. i don't know about android, or if any other situations would lead to it being true for desktop browsers (like a dockable laptop computer w/ touchscreen?)

@neauoire @somnius https://codepen.io/anon/pen/armpBX

@neauoire @somnius don't you think it's a little crazy that you can use CSS to make things animate and fly around a web page, but you can't get text to a readable size based on actual readable sizes?

@neauoire @somnius I suspected there was no way to do this, because as of the last few years I've had to make my browser windows nearly the full width of my display in order for the text to not be magnified to even huger size.

@neauoire @somnius it's just markdown and a simple thing to transform it into html. if there is any other way i could make this work (that doesn't involve either detecting the browser user agent on the server or javascript) then i can do it. i just don't know what it is.

@neauoire @somnius like this merveilles.town instance has a normal font size on desktops and mobile. but it uses javascript and client detection to do it. and i'm just making a few web pages, not a program or app.

@neauoire @somnius is there a way i could build it where both phones and desktops have a normal font size?