diff --git a/css/iphone.css b/css/iphone.css index f39bba3..6ab0ed6 100644 --- a/css/iphone.css +++ b/css/iphone.css @@ -21,11 +21,11 @@ @supports (scale: calc(1vh / 1px)) { :root { - /* 150 px = toolbar + barra-movil + aire; 352 px = editor mínimo + aire. + /* toolbar + barra-movil (alturas reales, js/ux.js) + aire; 352 px = editor mínimo + aire. px/px → número (requisito de scale()); min/max solo comparan números. */ --wam-escala: max(.3, min( 1, - (100vh - 150px) / 852px, + (100vh - var(--wam-toolbar-alto, 57px) - var(--wam-barra-alto, 48px) - 44px) / 852px, (100vw - 352px) / 393px )); } @@ -100,7 +100,7 @@ body.presentacion #barra-movil { display: none; } #barra-movil { flex: none; width: 100%; - max-width: 560px; + max-width: 820px; display: flex; align-items: center; justify-content: space-between; @@ -125,6 +125,7 @@ body.presentacion #barra-movil { display: none; } font-weight: 700; letter-spacing: .12em; text-transform: uppercase; + white-space: nowrap; color: var(--wam-texto-suave); } #btn-reproducir { diff --git a/js/ux.js b/js/ux.js index 908a44e..c92d1c8 100644 --- a/js/ux.js +++ b/js/ux.js @@ -917,9 +917,18 @@ var fijar = function () { document.documentElement.style.setProperty("--wam-toolbar-alto", Math.ceil(tb.getBoundingClientRect().height) + "px"); }; + var barra = porId("barra-movil"); + var fijarBarra = function () { + if (!barra) return; + var r = barra.getBoundingClientRect(); + if (r.height) document.documentElement.style.setProperty("--wam-barra-alto", Math.ceil(r.height + 14) + "px"); + }; fijar(); - if (typeof ResizeObserver === "function") new ResizeObserver(fijar).observe(tb); - else window.addEventListener("resize", fijar); + fijarBarra(); + if (typeof ResizeObserver === "function") { + new ResizeObserver(fijar).observe(tb); + if (barra) new ResizeObserver(fijarBarra).observe(barra); + } else window.addEventListener("resize", function () { fijar(); fijarBarra(); }); } /* ------------------------------------------------------------------