android - poner - establecer navegador predeterminado windows 7

El navegador predeterminado de Android crea una barra de desplazamiento horizontal para un diseño receptivo

Question

El navegador predeterminado de Android , muestra mi sitio más ancho y crea una barra de desplazamiento horizontal.

Aquí las capturas de pantalla del problema: (Chrome vs navegador predeterminado)

Mi ventana gráfica es:

<meta name="viewport" content="width=device-width, initial-scale=1">

¿Que debería hacer?

Answer 1

No tengo un navegador Andriod para probar esto, pero podría intentar establecer un ancho máximo para el div de búsqueda, por ej.

#search-bar-mobile {
    max-width: 70%;
}

Esto es fácil de hacer y, si lo ayuda, puede refinar el tamaño.

Buena suerte

Answer 2

Lo primero que debe hacer es configurar la depuración móvil en Chrome y conectar su dispositivo Android. Google proporciona instrucciones detalladas para eso aquí: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Una vez que haya conectado su dispositivo, abra sus herramientas devtools en la pestaña ''elementos''. Desplácese hasta el área de etiqueta ''cuerpo'' donde está el marcado de presentación. Ahora haga clic con el botón derecho en los elementos en el DOM devtools y elimínelos hasta que desaparezca la barra de desplazamiento. Funciona mejor para comenzar con los elementos principales como ''área de encabezado'' o ''área de contenido principal''. Cuando la barra de desplazamiento desaparece, usted sabe que el elemento que eliminó o el elemento secundario de ese elemento es lo que está rompiendo su diseño.

Actualiza tu página y elimina elementos dentro de la que provocó la barra de desplazamiento. Usted sabe que el problema es el elemento padre si la barra no desaparece cuando se eliminan todos los elementos secundarios.

Una vez que sepa qué elemento (o elementos) están rompiendo el diseño, puede ajustar el CSS en su devtool y luego cambiar su fuente en consecuencia.

Answer 3

Usted tiene un problema con su display: flex; propiedades en .content_product_title_and_price_section . Puede reproducir el comportamiento exacto en firefox si deshabilita todas las configuraciones de display excepto la display: -webkit-box; . -webkit-box este antiguo -webkit-box e iría con -webkit-flex solamente, o trataría de lograr el mismo efecto con display: inline-block en el h3 y el span y agregaría un width: 75% al h3 y vertical-align: top a ambos.

Answer 4

Desafortunadamente, el navegador predeterminado de Android en dispositivos anteriores a Lollipop no cuenta con soporte para la función de calc3 de CSS3 . Suponiendo que su entrada de búsqueda tiene la clase .search-box y teniendo en cuenta las capturas de pantalla, su CSS puede contener algo similar a esto:

.search-box {
  ...
  width: calc(100% - 100px);
  ...
}

... donde 100px es el ancho de su botón de búsqueda.

Para solucionar esto, debe agregar el prefijo a la declaración anterior con una que el navegador de Android comprenda y pueda aplicar:

.search-box {
  ...
  width: 75%;
  width: calc(100% - 100px);
  ...
}

Ahora, el navegador de Android aplicará el width: 75% a .search-box y omitirá el de calc() , que no es compatible, y el botón se mostrará en el 25% restante. Por supuesto, puede establecerlo en cualquier otro valor conveniente, que no sea el 75% . Tenga en cuenta que el ancho de pantalla más extendido en dispositivos anteriores a Lollipop es de 320px .

Nota: su calc() defectuosa podría aplicarse a un min-width , no a un width . Como no ha proporcionado ningún código, es tanta la ayuda que puedo proporcionar. Pero estoy bajo la impresión de que es suficiente. El problema de calc() es común cuando se admite el navegador predeterminado de Lollipop.

Del video que vinculó en los comentarios, parece que su problema no tiene nada que ver con lo anterior, sino que es causado por el contenido desbordado de .content_product_title_and_price_section .

Para arreglarlo, podrías agregar

@media(max-width: 379px){
  .content_product_title_and_price_section h3 {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
  }
}

... pero esto ocultará el exceso de texto de los títulos de productos más largos. Si no desea que eso suceda, un diseño alternativo para móviles estrechos sería agregar flex-wrap:wrap a .content_product_title_and_price_section , también bajo 379px . Para esto, es posible que desee ajustar ligeramente el diseño de los títulos de las imágenes. Esto podría funcionar:

@media(max-width: 379px){
  .content_product_title_and_price_section {
     flex-direction: column;
     align-items: center;
     text-align: center;
  }
  .content_product_title_and_price_section h3 {
     margin-bottom: -2rem;
  }
}

Agregué el margin-bottom para que no tenga que eliminar manualmente el   de su marcado, pero debo señalar que no deberían haber estado allí en primer lugar. Podría haber agregado fácilmente un relleno simple, a la izquierda de su precio <span> s.

Feliz codificación! ::} <(((*>: :)