0

He diseñado mi sitio web con mediaqueries. Ya hice las pruebas y se ve perfecto en moviles de 320 de ancho, 370, 480, y en tablets y demas aparatos. Cuando subi mi pagina la registre en google search console y ayer me llego el informe de rastreo de mi web donde me indican que tiene dos errores: 1. El contenido es mas ancho que la pantalla. 2. La ventana grafica no se ha definido. Y cuando veo mi pagina en el buscador abajo dice "tu web no esta optimizada para moviles"...cosa que es falso. Pero no entiendo por que me dicen eso.

Les pongo informacion mas detallada de lo que me dice google, para ver si me pueden ayudar:

GOOGLE:

""El contenido es más ancho que la pantalla En este informe aparecen las páginas en las que es necesario el desplazamiento horizontal para ver las palabras y las imágenes que contienen. Esto sucede cuando las páginas utilizan valores absolutos en las declaraciones CSS o utilizan imágenes diseñadas para que se vean mejor con un ancho de navegador concreto (como 980 píxeles). Para solucionar este error, asegúrate de que las páginas utilicen valores de posición y ancho relativos para los elementos CSS y comprueba que las imágenes también puedan escalarse. Consulta más información al respecto en el apartado Ajusta el contenido a la ventana de visualización."" ""No se ha definido ningún viewport En tu página no se define una propiedad viewport que indique a los navegadores cómo se ajusta el tamaño y la escala de la página para adaptarla al dispositivo. Dado que los visitantes de tu sitio web utilizan diferentes dispositivos con pantallas de diversos tamaños (desde grandes pantallas de ordenador hasta tablets y smartphones pequeños), tus páginas deberían definir un viewport mediante la etiqueta meta viewport. Consulta más información en el artículo Aspectos básicos del diseño web adaptable.""

Ahora les voy a mostrar una parte de mi codigo para que vean que si tengo definido el viewoport:

HTML HEAD:

//AQUI VA EL GOOGLE ANALITYCS
<meta charset="utf-8" />
<title>MI PAGINA WEB</title>
<meta name="description" content="MI PAGINA WEB" />
<meta name="keywords" content="MI, PAGINA, WEB" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lte IE 8]> <link rel="stylesheet" href="ie.css" /> <![endif]-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="jquery-3.3.1.min.js"> </script>
<script src="jquery-color-animate.min.js"> </script>
<script src="jq.js"> </script>

CSS

@media ( max-width : 900px ) {

}
@media ( max-width : 480px ) {

}
lalo2019
  • 85
  • 7
  • 1
    Puede referirse a alguna página en específico de tu sitio que no está bien configurada. – A. Cedano Mar 08 '19 at 16:00
  • Es un sitio de una sola pagina, ese que le llaman Single ONe Page, por ende, se esta refiriendo a toda mi pagina. – lalo2019 Mar 08 '19 at 16:07
  • 1
    ¿Y eso es **todo** lo que tienes como *media queries*? [Revisa esta respuesta](https://es.stackoverflow.com/a/50787/29967) donde se explica un poco más sobre el tema, la forma de escribirlos y los media específicos por dispositivos. Tener solamente dos valores no te va a asegurar un diseño adaptable a todos los dispositivos, me parece algo muy pobre. – A. Cedano Mar 08 '19 at 16:14
  • tengo un poco mas...solo que no quiera poner todos para no hartarlos con tanto codigo...ni siquiera he puesto el contenido de las media queries para no extenderme... – lalo2019 Mar 08 '19 at 16:20
  • 1
    Que haya media queries no quiere decir que esté optimizado para móvil y con el código compartido no se puede saber por qué Google te indica ese problema. Por ejemplo podrías tener un media query para 370px pero una imagen de 380px que hace que el contenido sea más ancho que la pantalla (a no ser que definas estilos para ello)... hace falta más información y código para saber el problema concreto. Lee [ask] y cómo crear un [mcve] para más información. – Alvaro Montoro Mar 10 '19 at 01:53

0 Answers0