Como tener una Pagina HTML para moviles y otra para PCs

[jhonny6721]

Ya me ha pasado, que algunas paginas mias se ven diferentes según las vea en el movil o en el PC.

¿Será que alguien sabe como tener dos versiones: Una HTML para moviles y otra para PCs? Es que necesito que sean diferentes en apariencia y funcionalidades.

Gracias de antemano

[LeoNicoPerez]

Hola mi amigo, claro, tienen 2 o más hojas de estilo.
Una para cada medio. A continuación te paso un enlace que
te va a ayudar a entender cómo declarar un archivo CSS para cada medio
que se quiera mostrar de una forma distinta a la normal:

[URL="http://librosweb.es/css/capitulo_1/medios_css.html"]MEDIOS CSS[/URL]

[pzin]

Lo de los medios no contempla si son móviles o equipos de escritorio.

¿Quién necesita hoy en día que varíe tanto la versión móvil de la versión de escritorio? ¿Por qué funcionalidades diferentes? Un diseño diferente, o ajustado a pantallas pequeñas, lo puedes hacer una diseño web responsivo (RWD), con media-queries y demás, que es lo habitual, manteniendo las mismas funciones.

Pero si realmente necesitas dos versiones, entonces debes de hacer dos versiones.

[Zeromm]

Hoy en dia teniendo las maravillas del Responsive Design, utilizar un archivo css para cada dispositivo es ir varios pasos por detrás de las tecnologias actuales.

No carges dos o más css (¿para que? además, estarias realizando más llamadas al servidor, con lo que realentizarias la web innecesariamente), utiliza solo un css y mediaqueries para adaptar tu diseño a cada dispositivo

[hackjose]

Y acuérdate de mobile-first
saludos

[mayazir]

preparas 2 css diferentes.
y vinculas a tu html, si la resolucion de la pantalla seria por 400 o menos q use css diseñado para smartphone y si seria mas q use css para pc

[Zeromm]

Iniciado por mayazir

preparas 2 css diferentes.
y vinculas a tu html, si la resolucion de la pantalla seria por 400 o menos q use css diseñado para smartphone y si seria mas q use css para pc

¿Que ventajas tiene esa opción sobre usar solo 1 css y trabajar la web con mediaqueries?

[hackjose]

En cuanto a las ventajas de usar el elemento link

La documentacion de html5 dice que si el atributo media coincide con el entorno actual entonces se debe descargar la hoja de estilos.

Creo que por esa parte se descargaría una hoja de estilos mas pequeña, seria una ventaja

Pero a la hora de cambiar de "resolucion" se tendría que descargar la otra, seria una desventaja

Yo usaria un solo archivo

salu2

[supercoco79]

Creo de que el hilo se ha ido de la pregunta inicial, ya que la pregunta dice que necesita 2 HTML diferentes, y estamos dando respuestas que no responden a la cuestión.

Aparte de esto, creo que no es una pregunta en sí de HTML, sino más bien de servidor o del lenguaje server client elegido (PHP, Python, Rubi, etc.) o incluso con Javascript se podría hacer.

Si por casualidad utilizas PHP, necesitas acceder al string del user-agent. Para conocer su formato:

Código PHP:

echo $_SERVER['HTTP_USER_AGENT']; //Ejemplo: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3
 

Del sistema operativo puedes saber si se trata de un dispositivo móvil, o incluso de la versión del Navegador.

O también utilizar librerías como por ejemplo Mobile-Detect:

https://github.com/serbanghita/Mobile-Detect/tags

Saludos.

[ersamupro]

Se que tu dices de una web que se adapte de las 2 formas, pero bueno si te sirve de algo yo tengo 2 Webs con diseño diferente adaptado para cada uno, y si alguien intenta acceder a la versión de ordenador desde su movil, lo detecta, y le da una alerta de si quiere cambiar a la versión para movil que será mas compatible, puedes editarlo si quieres para que simplemente lo detecte y se redireccióne sin alerta ninguna, utilizo un código Javascript:

Código HTML:

<script type="text/javascript"> 
		var navegador = navigator.userAgent.toLowerCase();
		if (navegador.search(/iphone|ipod|android|blackberry/) > -1 ) {
                var confirmar = confirm("¿Quieres entrar a la web más adaptada para tu dispositivo?");
                if (confirmar)
                document.location = "http://m.tuwebmovil.com";
		}
</script>