jeffemmett
/
jeffsi-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(mobile): comprehensive mobile rendering fixes for all platforms 

- index.html: add viewport-fit=cover, user-scalable=no, maximum-scale=1,
  apple-mobile-web-app-capable, format-detection meta tags
- close2.html: add missing viewport meta tag and mobile web app tags
- _base.scss: add touch-action:manipulation and -webkit-tap-highlight-color
  on body for 300ms tap delay fix and Android tap flash removal
- _videolayout_default.scss: fix invalid overflow:'hidden' (quoted string),
  add vh fallback before dvh for iOS 14 compat
- _toolbars.scss: move :active states outside hover media query so touch
  devices get visual feedback on hangup button
- _whiteboard.scss: add dvh/dvw fallback for iOS Safari address bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-10 19:32:54 -04:00
parent 2314d7d3f4
commit bddd22453c
6 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/_base.scss
View File

@ -33,6 +33,8 @@ body {
overflow: hidden; overflow: hidden;
color: #F1F1F1; color: #F1F1F1;
background: #040404; // should match DEFAULT_BACKGROUND from interface_config background: #040404; // should match DEFAULT_BACKGROUND from interface_config
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
} }
/** /**

12
css/_toolbars.scss
View File

@ -111,10 +111,10 @@ div.hangup-button {
&:hover { &:hover {
background-color: #E04757; background-color: #E04757;
} }
}
&:active { &:active {
background-color: #A21B29; background-color: #A21B29;
}
} }
svg { svg {
@ -129,10 +129,10 @@ div.hangup-menu-button {
&:hover { &:hover {
background-color: #E04757; background-color: #E04757;
} }
}
&:active { &:active {
background-color: #A21B29; background-color: #A21B29;
}
} }
svg { svg {

5
css/_videolayout_default.scss
View File

@ -57,7 +57,7 @@
.videocontainer { .videocontainer {
position: relative; position: relative;
text-align: center; text-align: center;
overflow: 'hidden'; overflow: hidden;
} }
#localVideoWrapper { #localVideoWrapper {
@ -287,9 +287,12 @@
#avatarContainer { #avatarContainer {
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
height: 50vh;
height: 50dvh; height: 50dvh;
margin-top: 25vh;
margin-top: 25dvh; margin-top: 25dvh;
overflow: hidden; overflow: hidden;
width: 50vh;
width: 50dvh; width: 50dvh;
#avatar { #avatar {

2
css/modals/_whiteboard.scss
View File

@ -2,6 +2,8 @@
.excalidraw-wrapper { .excalidraw-wrapper {
height: 100vh; height: 100vh;
height: 100dvh;
width: 100vw; width: 100vw;
width: 100dvw;
} }
} }

5
index.html
View File

@ -3,8 +3,11 @@
<!--#include virtual="head.html" --> <!--#include virtual="head.html" -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#1e1040"> <meta name="theme-color" content="#1e1040">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<!--#include virtual="base.html" --> <!--#include virtual="base.html" -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

3
static/close2.html
View File

@ -1,6 +1,9 @@
<html> <html>
<head> <head>
<!--#include virtual="/base.html" --> <!--#include virtual="/base.html" -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="css/all.css"/> <link rel="stylesheet" href="css/all.css"/>
<!--#include virtual="/title.html" --> <!--#include virtual="/title.html" -->
<script><!--#include virtual="/interface_config.js" --></script> <script><!--#include virtual="/interface_config.js" --></script>