The page zooms, keeps its height on phones and isn't reloaded by a pull
The viewport no longer forbids zooming (maximum-scale=1, user-scalable=no kept text at 10-12px out of reach), and it covers the screen with the keyboard resizing the content. The app is 100dvh tall instead of 100vh, so its bottom isn't under a phone browser's bar, and a pull past the top no longer reloads it (overscroll-behavior-y). New Styles/touch.css holds what a touch screen gets, under (pointer: coarse) only: for now field text at 16px, so iOS doesn't zoom into a focused field. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
1 parent
63d83810d7
commit
38336f9869
4 files changed
+23
-2
No files matched your search
@@ -15,5 +15,6 @@
|
||||
|
||||
@import "./theme.css";
|
||||
@import "./neo.css";
|
||||
@import "./touch.css";
|
||||
@import "./base.css";
|
||||
@import "./feed.css";
|
||||
@@ -5,6 +5,12 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* The page never scrolls itself (the feed and the pages scroll inside), so a pull past its top would only make a phone
|
||||
reload the app. Only vertically: a sideways overscroll is the trackpad's back gesture. */
|
||||
html, body {
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
details > summary::-webkit-details-marker {
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Touch screens.
|
||||
|
||||
A phone's layout uses the width variants (max-md:, md:) at the call site; how big a thing is to a finger uses the
|
||||
pointer: everything here sits under @media (pointer: coarse), so a mouse matches none of it and desktop keeps
|
||||
daisyUI's sizes. The rules are plain CSS in Tailwind's utilities layer: like neo.css's @utility overrides they beat
|
||||
daisyUI's rules, which sit in sublayers of it, and they set daisyUI's own size variables where it has one. */
|
||||
@layer utilities {
|
||||
@media (pointer: coarse) {
|
||||
/* Field text at 16px: iOS zooms into a focused field whose text is smaller, now that zooming is allowed. */
|
||||
:where(.input, .select, .textarea) {
|
||||
--font-size-min: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user