mobile: attempt to respond to orientation changes
Hunter
Tuesday, July 29th, 2025 at 2:55 PM
136 }
137 }
138
- /* Mobile keyboard state - hide preview when keyboard is open */
- @media (pointer: coarse), (pointer: none) {
139 + /* Mobile keyboard state - portrait mode (height > width) */
140 + @media (pointer: coarse) and (max-aspect-ratio: 1/1), (pointer: none) and (max-aspect-ratio: 1/1) {
141 body.mobile-keyboard-open .preview-pane {
142 display: none;
143 }
149 }
150 }
151
152 + /* Mobile keyboard state - landscape mode (width > height) */
153 + @media (pointer: coarse) and (min-aspect-ratio: 1/1), (pointer: none) and (min-aspect-ratio: 1/1) {
154 + body.mobile-keyboard-open .preview-pane {
155 + display: none;
156 + }
157 +
158 + body.mobile-keyboard-open .editor-pane {
159 + width: 100%;
160 + height: var(--visible-height, 100vh);
161 + order: 1;
162 + overflow: hidden;
163 + }
164 + }
165 +
166 </style>
167 </head>
168 <body>
486 if (!isMobileDevice()) return;
487
488 const currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
489 +
490 + // Detect potential orientation change: very large height difference when no keyboard activity
491 + // Use a higher threshold to avoid interfering with keyboard detection
492 + if (!wasKeyboardOpen && !isEditorFocused && Math.abs(initialViewportHeight - currentHeight) > 300) {
493 + initialViewportHeight = currentHeight;
494 + }
495 +
496 const heightDifference = initialViewportHeight - currentHeight;
497 const isKeyboardOpen = heightDifference > keyboardOpenThreshold;
498