Safari en iOS no carga la versión móvil de un componente del tema?

Soporte
1

Tengo un componente temático, tiene CSS y Head definidos tanto para escritorio como para móvil.

En móvil, una forma se define más pequeña por cuestión de espacio.

Funciona bien en Chrome, Firefox en iPhone, pero en Safari, carga la versión de escritorio en su lugar.
El navegador Safari no está cargando la versión de escritorio del sitio.
¿Alguien ha visto este problema? ¿Safari móvil de iOS no se reporta a sí mismo como un navegador móvil? o …

Gracias

2

Primero confirma que al forzarlo a la vista móvil, pongas esto al final de la url:

https://example.com?mobile_view=1

El problema podría no ser lo que crees…

También deberías indicar qué versión de Safari estás usando.

1 me gusta
3

gracias @merefield

  • es safari en iOS 17.1.2, cuando se carga el componente, muestra la forma grande definida para escritorio
    acabo de actualizar iOS a la última 17.2.1, igual.
  • en el mismo dispositivo, si lo abro usando chrome o firefox, muestra la forma pequeña definida para móvil
  • en el navegador de escritorio, si lo veo https://example.com?mobile_view=1, muestra la forma pequeña definida para móvil.

Sospecho que hay algo en mi navegador safari que carga el contenido de escritorio, pero no es así, digamos que carga los diseños móviles, no la versión de escritorio.
no me había dado cuenta de esto antes, tal vez usaba chrome la mayor parte del tiempo en iphone…
para reproducirlo, hice esta versión simplificada para mostrar el problema.

  • este código de ejemplo a continuación básicamente muestra un círculo rojo grande en el navegador de escritorio, uno más pequeño en el navegador móvil.
  • después de instalar este componente, podrás ver
    muestra el círculo pequeño en chrome/firefox de iphone, esto es lo esperado
    pero uno grande con safari, como se define para el navegador de escritorio. esto no es lo esperado
  • crea un componente de tema, agrega el contenido a continuación
    image
    image999×567 55.6 KB

Escritorio

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // ¡¡¡tamaño más grande!!!
    height: 90px;       // ¡¡¡tamaño más grande!!!
    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 class="deng-box1">
    <div class="deng">
    </div>
</div>

Móvil

CSS


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

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // ¡¡¡tamaño más pequeño!!!
    height: 45px;   // ¡¡¡tamaño más pequeño!!!
    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 class="deng-box-mobile">
    <div class="deng">
    </div>
</div>
1 me gusta
4

Sugiero empaquetar esto en GitHub para que sea muy fácil de corroborar…

5

¿Qué sucede si pones esta cadena de consulta en el navegador móvil de Safari?

6

de esta manera con ?mobile_view=1, carga la versión móvil en el navegador Safari del iPhone
hmm…

lo pondré en un repositorio para que sea fácil de probar/depurar… ¡gracias por tu ayuda!

7

Ah, ¿y antes no? ¡Eso es interesante!

En la versión 17.3 (PB) estoy viendo la versión móvil de mi TC en mi iPhone 11 sin necesidad de forzarla (con esa cadena de consulta).