/* ============================================================ RETRATO.CSS — o site não vira junto com o aparelho "Não tem como, em vez de aparecer o aviso 'gire o celular', o layout simplesmente não ficar no modo paisagem quando for usado num celular?" Tem. É o que todo aplicativo de orientação travada faz: a tela continua em pé enquanto o aparelho gira na mão. Ninguém avisa nada, ninguém pede nada — a pessoa vira o celular, vê que a tela não acompanhou, e vira de volta. COMO SE FAZ SEM PODER TRAVAR DE VERDADE Travar a orientação é privilégio de quem instalou o app: o AndroidManifest e o manifesto do PWA fazem isso, e o `screen.orientation.lock()` funciona nesse contexto. No navegador comum não existe API que proíba girar, e o Safari do iPhone nem tem a função. Então o desenho é girado de volta. O corpo da página vira uma caixa em pé — 100dvh de largura por 100dvw de altura, as duas medidas trocadas — e recebe um giro de 90 graus que a encaixa exatamente sobre a tela deitada. O leiaute lá dentro continua sendo o de retrato, com a mesma largura de sempre; quem girou foi a moldura. E A MESA FICA DE FORA A mesa TEM um leiaute deitado de verdade (deitado.css), feito para esta tela. Ela é a única página do site que gira, e por isso todas as regras daqui pedem `body:not(.tm-deitar)`. ============================================================ */ /* ------------------------------------------------------------ QUANDO O GIRO ACONTECE — E O QUE ELE APRENDEU DO JEITO RUIM "Aconteceu isso aí. Não é pra tela girar, é pra ficar sempre na vertical." — com a foto de um iPhone EM PÉ, teclado aberto, e a tela de login deitada. O defeito: com o teclado na tela, a área que sobra para a página tem 402px de largura por ~374 de altura. Mais larga que alta. Para o CSS isso É `orientation: landscape` — e as três condições antigas batiam todas num celular que estava em pé na mão da pessoa. Duas travas agora, e cada uma cobre um caso que a outra não cobre — foi o teste de mutação que me obrigou a separá-las, porque uma sozinha já segurava a foto e nenhuma das duas estava provada: [data-giro] — o giro não acontece quando o aparelho DIZ que está em pé (ângulo 0 ou 180), pelo `screen.orientation.angle`, que o TM_Retrato grava no . O teclado não mexe nesse ângulo. É esta que resolve a foto; min-width: 560px — e esta resolve a mesma foto quando o script NÃO roda: sem ângulo gravado o giro acontece assim mesmo — um navegador que não conta o ângulo não pode condenar o site a aparecer deitado —, e aí o que sobra para distinguir é a largura. Celular deitado tem 568px para cima, o iPhone SE, o menor de todos. Em pé, com teclado ou sem, ele nunca passa de 480. As outras três continuam valendo: orientation: landscape — a tela está deitada; max-height: 560px — é uma tela BAIXA. iPad deitado tem 768px de altura e lê bem assim; pointer: coarse — o dedo é o ponteiro. Janela baixa no computador continua sendo computador, e girar a página de alguém que está no notebook seria um estrago, não uma ajuda. ------------------------------------------------------------ */ @media (orientation: landscape) and (max-height: 560px) and (min-width: 560px) and (pointer: coarse) { /* A página deixa de rolar por fora: quem rola agora é a caixa girada, por dentro. Sem isto sobra uma barra de rolagem da altura da caixa deitada, que não leva a lugar nenhum. Vale só quando há giro — daí os dois ângulos no seletor. Travar a rolagem de uma página que NÃO foi girada seria prender o jogador numa tela que ele não consegue rolar. */ html:not([data-giro="0"]):not([data-giro="180"]):has(body:not(.tm-deitar)) { overflow: hidden; } /* ------------------------------------------------------------ O GIRO A pergunta é pela NEGATIVA, e é aí que mora a decisão: gira A MENOS QUE o aparelho diga que está em pé. Com o atributo em 0 ou 180 — aparelho na vertical, com teclado ou sem — nada aqui se aplica. Sem atributo nenhum, gira: é a diferença entre "o navegador acha que está deitado" e "o aparelho está deitado", e na falta do segundo dado quem segura a tela em pé é a largura mínima. ------------------------------------------------------------ */ html:not([data-giro="0"]):not([data-giro="180"]) body:not(.tm-deitar) { position: fixed; top: 0; left: 0; margin: 0; /* AS DUAS MEDIDAS TROCADAS A caixa é um retrato desenhado sobre uma tela deitada: a largura dela é a ALTURA da tela, e a altura dela é a LARGURA. O `vh`/`vw` vem antes do `dvh`/`dvw` como reserva para navegador antigo — o segundo par é o que conta a barra de endereço que aparece e some. */ width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; /* A rolagem mora aqui dentro agora. */ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform-origin: 0 0; } /* O aparelho girou no sentido anti-horário: o desenho gira no horário. `transform-origin: 0 0` põe o eixo no canto de cima à esquerda, e a translação traz a caixa girada de volta para dentro da tela — sem ela, ela nasce fora. É também o caso de quem não tem ângulo nenhum: 90 é o sentido em que a maioria dos aparelhos é virada, e um palpite fixo é melhor que uma tela deitada. O terceiro `:not` — o do 270 — não é enfeite. Sem ele este seletor tem peso maior que o do outro lado, logo abaixo, e ganharia dele: os dois lados girariam para o mesmo sentido, e quem virasse o celular para a direita leria a tela de cabeça para baixo. Foi o teste que mostrou; eu tinha escrito errado. */ html:not([data-giro="0"]):not([data-giro="180"]):not([data-giro="270"]) body:not(.tm-deitar) { transform: translateY(100vh) rotate(-90deg); transform: translateY(100dvh) rotate(-90deg); } /* E o outro lado. Girar sempre para o mesmo acertaria metade das vezes e deixaria a outra metade de cabeça para baixo. */ html[data-giro="270"] body:not(.tm-deitar) { transform: translateX(100vw) rotate(90deg); transform: translateX(100dvw) rotate(90deg); } /* ------------------------------------------------------------ ALTURA CHEIA, DENTRO DA CAIXA GIRADA O tema e o tm-ui.css mandam `min-height: 100dvh` nos dois envelopes de página, para o fundo escuro cobrir a tela inteira. Dentro da caixa girada, "a tela inteira" na vertical passou a ser a LARGURA do aparelho — sem esta troca o fundo terminava no meio e aparecia uma faixa clara embaixo do conteúdo. Também só quando há giro: numa página não girada isto esticaria o fundo pela medida errada. ------------------------------------------------------------ */ html:not([data-giro="0"]):not([data-giro="180"]) body:not(.tm-deitar) .tm-main, html:not([data-giro="0"]):not([data-giro="180"]) body:not(.tm-deitar) .tm-home, html:not([data-giro="0"]):not([data-giro="180"]) body:not(.tm-deitar) .tm-app { min-height: 100vw !important; min-height: 100dvw !important; } /* O aviso antigo não é mais impresso. A regra fica como garantia para quem tiver a página velha em cache: um cartaz de tela cheia sobrevivendo dentro da caixa girada seria o pior dos dois mundos. */ .tm-gire { display: none !important; } }