En la mayoría de los casos, uno o varios objetos de la página son más anchos que la pantalla de un teléfono, y eso hace que toda la página sea demasiado ancha. Configura esos objetos con Anchura completa y un Máx. ancho, y se reducirán para caber. La pantalla de un ordenador es lo bastante ancha como para ocultar el problema, y por eso la página se ve bien en él.
1. Comprueba qué tipo de página tienes
Selecciona la página en tu lista de páginas y ve a Inspector > Ajustes de la página > Diseño de página.
| Si dice | Qué significa | Ve a |
|---|---|---|
| Adaptable | Una sola página que se adapta a cualquier pantalla | Pasos 2 a 5 |
| Diseño centrado o Diseño alineado a la izquierda | Una página de ancho fijo que mantiene su ancho de escritorio en un teléfono, salvo que añadas una página independiente para teléfonos (una página para móviles) | Pasos 2 y 6 |
No cambies el diseño de página para solucionarlo. Puede alterar por completo tu diseño, y el cambio no se puede deshacer.
2. Míralo en tu teléfono
Una ventana del navegador en tu ordenador no siempre se corresponde con un teléfono real, así que usa una de estas opciones:
- Tu sitio web publicado: ábrelo en una ventana privada en tu teléfono. Una ventana privada no usa la copia guardada de tu navegador. Si la página se ve bien ahí, tu sitio web está bien: consulta He publicado, pero mi sitio web sigue mostrando la versión antigua.
- Antes de publicar: haz clic en Vista previa en la barra de herramientas, elige Preview QR Code (vista previa con código QR) y escanea el código con la cámara de tu teléfono.
Si la vista previa con código QR no carga:
- Conecta el teléfono y el ordenador a la misma red Wi-Fi, y desactiva cualquier VPN o iCloud Private Relay.
- Si EverWeb indica que el servidor de vista previa local no está activado, ve a EverWeb > Ajustes > General en un Mac, o a Editar > Opciones > General en Windows, y marca Utilizar servidor de previsualización.
Anota qué objetos sobresalen y corrígelos de uno en uno.
3. Páginas adaptables: corrige cada objeto demasiado ancho
Estás en el lugar correcto si la página se desliza hacia los lados, tiene una franja blanca en un lateral, aparece cortada o está desplazada a la izquierda.
- Selecciona el objeto. Si aparece en todas las páginas, probablemente está en una página maestra, así que cámbialo ahí.
- Ve a Inspector > Métricas (el tercer icono).
- En Tamaño, marca Anchura completa.
- En Máx. ancho, escribe el ancho máximo que quieres que tenga el objeto en una pantalla grande, por ejemplo su ancho actual. La casilla aparece atenuada hasta que marcas Anchura completa. Déjala en 0 para que ocupe toda la página.
- Si Mín. ancho tiene un número, asegúrate de que es menor que el ancho de un teléfono. Los teléfonos miden unos 375 píxeles de ancho. 0 significa sin mínimo.
- En Márgenes y relleno, vuelve a poner a 0 o a un número pequeño cualquier margen izquierdo o derecho grande. Los márgenes se suman al ancho.
- Repite el proceso con cada objeto que sobresalga.
Dos excepciones:
- El objeto no admite Anchura completa. Algunos widgets tienen siempre un ancho fijo, como los widgets Facebook Page Timeline y PayPal (Legacy). Colócalos dentro de un contenedor, con unos 280 a 320 píxeles de ancho.
- El objeto no pasa a Anchura completa, o sigue siendo demasiado ancho, dentro de una fila adaptable (Responsive Row). Haz clic con el botón derecho en él (o Control-clic en un Mac), elige Quitar de la fila receptiva y sigue los pasos anteriores.
4. Imágenes: evita que se vean aplastadas o dejen huecos
Primero completa el paso 3 con la imagen y, después:
- Selecciona la imagen y ve a Inspector > Opciones de forma (el segundo icono).
- En Relleno, en el desplegable de escalado de la imagen, elige Escalar para ajustar.
- Marca Auto-ajustar altura a la imagen. Así se elimina el espacio vacío por encima y por debajo de la imagen en un teléfono. Funciona con imágenes configuradas con Anchura completa y Escalar para ajustar.
| Ajuste | Lo que ve tu visitante |
|---|---|
| Escalar para ajustar | La imagen completa. Puede dejar espacio vacío a menos que marques Auto-ajustar altura a la imagen |
| Escalar para llenar | La imagen llena su área, y los bordes pueden quedar recortados |
| Estirar | La imagen llena su área y puede verse aplastada en un teléfono |
Si una imagen se ve en tu ordenador pero no aparece en tu teléfono, prueba a cambiarla de Escalar para llenar a Escalar para ajustar.
5. Una sección se monta encima de otra
Un contenedor con una altura fija no puede crecer cuando su contenido necesita más espacio en un teléfono, así que la sección siguiente queda encima de él.
- Selecciona el contenedor. Si no dejas de seleccionar lo que hay dentro, haz clic con el botón derecho y usa Elegir capa.
- Ve a Inspector > Ajustes del widget (el engranaje, el último icono).
- En Tamaño, configura Altura como Auto.
- Pon Altura máxima a 0, que significa sin límite.
- Haz lo mismo con los contenedores que haya dentro.
Comprueba también que el objeto no tenga activado Permitir arrastrar libremente (Inspector > Métricas, en Posición). Un objeto colocado libremente no empuja nada hacia abajo, así que puede quedar encima de otro contenido en un teléfono. Desmarca la casilla si el objeto debe fluir con la página.
6. Páginas con Diseño centrado
Toda la página se ve demasiado pequeña o cortada en un teléfono. Este tipo de página mantiene su ancho de escritorio. Añádele una página independiente para teléfonos: consulta Mi sitio web se ve mal en un teléfono.
El texto se superpone o se sale de sus cuadros en un teléfono. En un teléfono, el texto puede ocupar más líneas de las que diseñaste, así que ya no cabe en su cuadro. Usa Tamaño Mínimo de Fuente para que el texto pueda hacerse más pequeño en una pantalla pequeña:
- Selecciona el texto.
- Abre el Inspector de texto y ve a la sección Fuente.
- Mantén tu tamaño normal en la casilla Font Size (tamaño de fuente). En la casilla Tamaño Mínimo de Fuente, introduce el tamaño más pequeño que quieras en un teléfono. Por ejemplo, con un tamaño de fuente de 24, podrías poner 18.
- Ve a Archivo > Publicar sitio completo.
Si todo tu texto está en uno o dos cuadros de texto grandes, pon también cada párrafo en su propio cuadro de texto. Los cuadros largos crecen en un teléfono y descolocan otros elementos.
7. Comprueba que ha funcionado
- Publica tu sitio web. Si has cambiado varias páginas, usa Archivo > Publicar sitio completo. Consulta ¿Qué diferencia hay entre Publicar y Publicar sitio completo?
- Abre la página en una ventana privada en tu teléfono.
Cuando está solucionado, la página no se desliza hacia los lados, no hay nada cortado y nada queda encima de otra cosa. Revisa también tus otras páginas, ya que a menudo usan los mismos ajustes.
Si sigues viendo la página antigua, consulta Cómo borrar la caché del navegador.
8. ¿Sigue mal? Envíanos tu archivo de proyecto
Podemos ver tu sitio web publicado, pero no tu archivo de proyecto (la copia editable de tu sitio web, guardada en tu ordenador). Con él, podemos encontrar el objeto exacto que causa el problema.
- Ve a Archivo > Ventana de proyectos para abrir la lista de tus sitios web, titulada Bienvenida a EverWeb.
- Junto a tu proyecto, haz clic en los tres puntos en un Mac, o en la flecha hacia abajo en Windows.
- Elige Enviar el archivo del proyecto a soporte.
- Cuando termine la subida, EverWeb te dará un enlace. Envíanos ese enlace.
Si tu proyecto ocupa más de 2GB, o la subida no termina, usa nuestra página de subida de proyectos. En Windows, comprime en zip toda la carpeta que contiene tu proyecto, no solo el archivo .ewwinproj.
Indícanos también:
- El nombre de la página y del objeto que se ve mal
- Tu versión de EverWeb
- Si usas Mac o Windows
Y envíanos dos capturas de pantalla: una de la página en tu teléfono, y otra de la ventana completa de EverWeb con ese objeto seleccionado.