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

Suporte
1

Tenho um componente de tema, ele tem CSS e Head definidos para Desktop e mobile.

No mobile, uma forma é definida menor para economizar espaço.

Funciona bem no Chrome, Firefox no iPhone, mas no Safari, ele carrega a versão desktop em vez disso.
O navegador Safari não está carregando a versão desktop do site.
Alguém viu esse problema? O Safari mobile do iOS não se reporta como um navegador mobile? Ou…

Obrigado

2

Primeiro confirme que, forçando para a visualização móvel, adicione isto ao final da URL:

https://example.com?mobile_view=1

O problema pode não ser o que você pensa…

Você também deveria informar qual versão do Safari você está usando?

1 curtida
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>
1 curtida
4

Sugiro empacotar isso no GitHub para facilitar muito a verificação pelas pessoas…

5

O que acontece se você colocar esta string de consulta no navegador móvel Safari?

6

Desta forma, com ?mobile_view=1, ele carrega a versão móvel no navegador Safari do iPhone
hmm…

Vou colocar em um repositório para facilitar a tentativa/depuração… obrigado pela sua ajuda!

7

Ah, e antes não era? Que interessante!

Em 17.3 (PB) estou vendo a versão mobile do meu TC no meu iPhone 11 sem precisar forçar (com essa querystring)