O navegador Safari do iOS não carrega a versão mobile de um componente de tema?

Suporte ao Produto
3

obrigado @merefield

  • é o safari no iOS 17.1.2, quando carrega o componente, ele mostra a forma grande definida para Desktop
    acabei de atualizar o iOS para o mais recente 17.2.1, o mesmo.
  • no mesmo dispositivo, se abrir usando chrome ou firefox, ele mostra a forma pequena definida para Mobile
  • no navegador desktop, se visualizar https://example.com?mobile_view=1, ele mostra a forma pequena definida para Mobile.

Suspeito que há algo no meu navegador safari carregando o conteúdo desktop, mas não é, digamos que ele carrega os layouts mobile, não a versão desktop.
não tinha notado isso antes, talvez eu estivesse usando o chrome na maior parte do tempo no iphone…

para reproduzir, fiz esta versão simplificada para mostrar o problema.

  • este código de exemplo abaixo basicamente mostra um grande círculo vermelho no navegador desktop, um menor no navegador mobile.
  • após instalar este componente, você poderá ver
    ele mostra o círculo pequeno no chrome/firefox do iphone, isso é esperado
    mas um grande no safari, como definido para o navegador desktop. isso não é esperado
  • crie um componente de tema, adicione os conteúdos abaixo
    image
    image999×567 55.6 KB

Desktop

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // tamanho maior !!!
    height: 90px;       // tamanho maior !!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head


<div>
    <div>
    </div>
</div>

Mobile

CSS


.deng-box-mobile {
    position: fixed;
    top: 180px;
    left: -40px;
    z-index: 1999;
}

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // tamanho menor!!!!!!
    height: 45px;   // tamanho menor !!!!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head


<div>
    <div>
    </div>
</div>