Post by mapostigo » Sun Jun 28, 2015 6:48 am

Hola, hace bastante tiempo llevo haciendo pruebas para lograr que http://www.nativas.pw sea una web Resposive. He colocado el código

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
en diferentes lugares del header.tpl pero no consigo que funcione correctamente.

El último intento es el siguiente:

Code: Select all

<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
	<meta charset="utf-8">
<head>
	[b]<meta name="viewport" content="width=device-width, initial-scale=1.0" />[/b]
<head>	
	<style>
	.container {
		width:996px;
		margin:0px auto;
		font-size:1em;
	}
	section,aside {
		padding: 10px;
		background:#ccc;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	}
	section {
		float: left;
		width: 70%;
	}
	aside {
		float: right;
		width: 25%;
	}
	nav {
		overflow: hidden;
	}
	nav ul {
		list-style-type:none;
		float:left;
		padding:0px;
	}
	nav ul li {
		float:left;
		padding:3px 10px;
		margin:2px;
		background:#ccccff;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	}
	footer {
		margin:10px;
		text-align:center;
		clear:both;
	}
 
	/* para 980px o menos */
	@media screen and (max-width:980px) {
		.container {
			width:98%;
		}
		section {
			width:68%;
		}
	}
 
	/* para 700px o menos */
	@media screen and (max-width:700px) {
		aside,section {
			float:none;
			width:96%;
		}
		nav, section {
			font-size:1.2em;
		}
		aside {
			margin-top:5px;
		}
		nav ul {
			float:none;
			clear:both;
		}
	}
 
	/* para 480px o menos */
	@media screen and (max-width:480px) {
		aside {
			display:none;
		}
		nav, section {
			font-size:1.5em;
		}
		section {
			width:94%;
		}
		nav ul {
			float:left;
			clear:none;
			width:50%;
		}
		nav ul li {
			float:none;
		}
	}
	</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-55864520-1', 'auto');
  ga('send', 'pageview');
.
.
.
Podéis indicarme cómo debo colocar la etiqueta para que funcione correctamente?

Muchas gracias de antemano.

Un saludo

New member

Posts

Joined
Thu Oct 30, 2014 11:50 pm

Post by Nedned » Sun Jun 28, 2015 5:59 pm

Buenas,

Yo no soy diseñador, pero hasta lo que yo veo esta etiqueta vale para que tu web se adapte a las medidas del movil, pero tiene que ser una web flexible o responsive, en el caso de tu web no tiene pinta de que sea responsive y si no es responsive aunque le pongas esa etiqueta no se va a adaptar .

No se si estoy en lo correcto porque no diseño casi nada, pero me temo que es así :)

Suerte!

Tipos de perros
Hoteles que admiten perros
CalcularIVA


Active Member

Posts

Joined
Thu Oct 09, 2014 2:48 pm


Post by mapostigo » Mon Jun 29, 2015 2:28 am

Hola Wen, muchas gracias por responder.

Hice algunos cambios y ahora esta casi perfecta en desktop, estos son los resultados de movil:

64 / 100Experiencia de usuario
Es posible que esta página no supere la prueba de optimización para móviles de Google. Más información

Elementos que debes corregir:
Adaptación del contenido a la ventana gráfica
El contenido de la página es demasiado ancho para la ventana gráfica y el usuario tiene que desplazarse horizontalmente. Adapta el contenido de la página a la ventana gráfica para proporcionar una experiencia de usuario mejor.
El contenido de la página tiene 908 píxeles en CSS de ancho, pero la ventana gráfica solo tiene 320. Los elementos siguientes quedan fuera de la ventana gráfica:
El elemento <img src="http://nativas…te-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…-1-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…es-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…r5-900x400.PNG"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…as-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…os-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…os-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…es-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…26-900x400.JPG"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…es-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…-1-900x400.jpg"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…85-900x400.JPG"> queda fuera de la ventana gráfica.
El elemento <img src="http://nativas…te-900x400.jpg"> queda fuera de la ventana gráfica.
Ocultar detalles
Aplicar el tamaño adecuado a los botones táctiles
Puede que algunos enlaces y botones de la página web sean demasiado pequeños para que los usuarios puedan tocarlos en una pantalla táctil. Quizás debas aplicar un tamaño más grande a los botones táctiles para proporcionar una experiencia de usuario mejor.
Los botones táctiles siguientes están cerca de otros y puede que necesiten más espacio a su alrededor.
El botón táctil <img src="image/flags/es.png"> y 2 más están cerca de otros botones táctiles ver la captura de pantalla.
El botón táctil <input type="text" name="search"> está cerca de 1 botones táctiles mostrar original.
El botón táctil <a href="http://nativas…=account/login">Inicie sesión</a> y 46 más están cerca de otros botones táctiles ver la captura de pantalla.
Ocultar detalles
3 reglas aprobadas
Mostrar detalles
95 / 100Velocidad

Elementos que puedes plantearte corregir:
Reducir el tiempo de respuesta del servidor
Mostrar cómo corregirlo
Optimizar imágenes (son 2 imagenes de 1 kb)
Mostrar cómo corregirlo
8 reglas aprobadas
Mostrar detalles

Desktop: 96 / 100

Resumen de sugerencias

Elementos que puedes plantearte corregir:
Reducir el tiempo de respuesta del servidor
En nuestro test, el servidor respondió en 0,48 segundos. Hay muchos factores que pueden ralentizar el tiempo de respuesta del servidor. Lee nuestras recomendaciones para saber cómo puedes supervisar y medir dónde invierte el servidor la mayoría del tiempo.

Asi que solo me queda adaptar el contenido a la ventana gráfica.

Si tienes idea de como hacerlo se agradece.

New member

Posts

Joined
Thu Oct 30, 2014 11:50 pm

Post by awerkin70 » Thu Jul 09, 2015 9:18 pm

Lo mejor que puedes hacer es migrar a OpenCart 2, ya que de lo contrario tendrás que modificar prácticamente todo el sitio. debes partir primero por el menú que sea responsivo, posteriormente las imagenes que se adapten al cambiar el tamaño de la pantalla, esto se puede hacer por medio de -mediaqueries en CSS o bien dando anchos porcentuales.

Newbie

Posts

Joined
Thu Jul 09, 2015 9:15 pm
Who is online

Users browsing this forum: No registered users and 6 guests