fix(mobile): normalize keyboard height device-px -> points (was overshooting ~3x on 3x screens)
Root cause: the Keyboard plugin reports keyboardHeight in device pixels on this build; CSS needs points, so the raw value overshot by the devicePixelRatio. Divide by DPR when the raw value exceeds the screen's point height. Web-only. Build marker -> 2026-07-18-batch102. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+10
-13
@@ -1112,7 +1112,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<script src="/icons.js?v=6"></script>
|
||||
<script>window.__BUILD='2026-07-18-batch101';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
|
||||
<script>window.__BUILD='2026-07-18-batch102';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
|
||||
// Emoji are rendered with the OS's own (colour) emoji font — instant, zero network.
|
||||
//
|
||||
// We used to run Twemoji over every emoji, which swapped each one for an <img> pulled INDIVIDUALLY from
|
||||
@@ -1127,18 +1127,15 @@ function twemojify(_el){ /* native emoji: nothing to do */ }</script>
|
||||
// juggling here — we only tag <html> so CSS can make small native-only tweaks if needed.
|
||||
(function(){ try{ var C=window.Capacitor; if(!C||!C.isNativePlatform||!C.isNativePlatform()) return;
|
||||
var p=(C.getPlatform&&C.getPlatform())||''; var r=document.documentElement; r.classList.add('native-app'); if(p) r.classList.add('native-'+p);
|
||||
// Keyboard: with resize:none the WebView never resizes, so we raise the composer to sit on the keyboard
|
||||
// using the VisualViewport API — the ACTUAL amount the visible area shrinks by. This is measured, not the
|
||||
// plugin's reported height (which overshot), so it lands exactly on the keyboard.
|
||||
if(window.visualViewport){
|
||||
var vv=window.visualViewport;
|
||||
var onVV=function(){
|
||||
var kb=Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
|
||||
r.style.setProperty('--kb', kb+'px');
|
||||
var open=kb>4; document.body.classList.toggle('kb-open', open);
|
||||
if(open){ var b=document.getElementById('msgs'); if(b) b.scrollTop=b.scrollHeight; }
|
||||
};
|
||||
vv.addEventListener('resize', onVV); vv.addEventListener('scroll', onVV);
|
||||
// Keyboard: with resize:none the WebView never resizes, so we raise the composer by the keyboard height.
|
||||
// The plugin reports that height in DEVICE PIXELS on some builds, but CSS wants points — so a raw value
|
||||
// bigger than the screen's point height is divided by devicePixelRatio. This normalization makes it land
|
||||
// exactly on the keyboard regardless of unit.
|
||||
function bzKbHeight(raw){ raw=raw||0; var dpr=window.devicePixelRatio||1; return Math.round(raw > window.innerHeight ? raw/dpr : raw); }
|
||||
var KB=C.Plugins&&C.Plugins.Keyboard;
|
||||
if(KB && KB.addListener){
|
||||
KB.addListener('keyboardWillShow', function(info){ var h=bzKbHeight(info&&info.keyboardHeight); r.style.setProperty('--kb', h+'px'); document.body.classList.add('kb-open'); var b=document.getElementById('msgs'); if(b) requestAnimationFrame(function(){ b.scrollTop=b.scrollHeight; }); });
|
||||
KB.addListener('keyboardWillHide', function(){ r.style.setProperty('--kb','0px'); document.body.classList.remove('kb-open'); });
|
||||
}
|
||||
}catch(_){} })();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user