duda para previsualizar pagina web en pc y moviles

[pithon]

Hola, tengo una pagina web realizada en html4 pero realmente quiero saber como puedo hacer para previsualizar la pagina correctamente en cualquier ordenador segun el tamaño de su pantalla y en los moviles mas usados del mercado, espero que los mas expertos me den sus explicaciones de los pasos a seguir.

Saludos.

[emprear]

Iniciado por pithon

Hola, tengo una pagina web realizada en html4 pero realmente quiero saber como puedo hacer para previsualizar la pagina correctamente en cualquier ordenador segun el tamaño de su pantalla y en los moviles mas usados del mercado, espero que los mas expertos me den sus explicaciones de los pasos a seguir.

Saludos.

Estás haciendo la pregunta del millón, y la respuesta, con la cantidad de dispositivos que están apareciendo, da más de un dolor de cabeza, incluso a los "más expertos como señalas".
En primer lugar no existe una respuesta general, cada caso en particular merece un trato diferente. Todo depende de los contenidos de tu web y los objetivos que quieras alcanzar y fundamentalmente el nivel de audiencia. Fijate vos decís "los móviles más usados en el mercado"... mercado, pero dónde, en japón, europa, usa, latinoamérica... vas a apuntar a smartphones de ultima generación, o a dispositivos más modestos?
Que es lo importante de tu web, que sea muy atractiva visualmente y la vean 10000 personas, o que tenga un estilo muy básico y la puedan ver 100000?

Pero vayamos a lo práctico, yo personalmente hasta el momento hago lo siguiente (salvo obviamente que el cliente me diga: Quiero ESTO!)

primero utilizo un script, en php o htaccess ( http://detectmobilebrowsers.com/ )para hacer una división general entre

PC/Laptops/Ipad-tablets
y
móviles (aqui no creo subcategorías)

Y posteriormente hago dos páginas, a las cuales redirijo según sea el caso.

Saludos

[txemaarbulo]

Para saber las dimensiones de la pantalla del usuario

<script type="text/javascript">
<!-- //
if (screen.width <= 959) { // si es menor de 960 px
window.location = "vete a la pagina.html";
}
// -->
</script


<script type="text/javascript">
<!-- //
if (screen.width >= 960) { // si la pantalla es menor a 960 px
window.location = "vete a la pagina.html";
}
//-->
</script>

Y si quieres hacer más:

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
// mándale a donde quieras
}

[pithon]

Hola emprear, en principio gracias por tu colaboracion, aunque el enlace que me pusistes no consigo aplicarlo, para poder redirijir segun sea un pc o movil. Espero que me puedas seguir ayudando.

txemaarbulo tambien agradezco tu ayuda y gracias por darme otra solucion.

Saludos.

[emprear]

Si te fijás. la script que mencioné viene preparada para diferentes lenguajes, te doy el ejemplo en php

Primero vas a ver una función quedetecta si el dispoditivo es movil o no, y si lo es, hace una redirección a la página diseñada para móviles con header Location

Entonces, en tu index.php, que es la versión para PC, al inicio de la misma (no debe de haber ninguna línea o espacio en blanco previamente, pones la script y cambias el valor por defecto del location hacia la url de tu página para móviles.
header('Location: http://tupagina.com/movil');
y debajo pones el php / html para la versión para PC

--> aqui el código normal para la versión de PC

Saludos

[pithon]

emprear gracias ahora me ha quedado claro, solo una ultima cosa, hay algun simulador de moviles para poder ver como va quedando la web en los moviles, saludos.

[emprear]

Para Opera mobile
http://dev.opera.com/articles/view/o...bile-emulator/

Para OPera mini
http://www.opera.com/developer/tools/mini/

Hay muchos más, pero a veces no son muy fiables tampoco y tienen una funcionalidad muy básica.
Hay tambien para android
http://buildcontext.com/blog/2008/an...ator-pc-google

Estos son solo algunos que alguna vez probé, debe de haber mas seguro

Saludos

[pithon]

emprear muchas gracias por los enlaces creo que me seran muy utiles, saludos.

[fredar21]

Y si pruebas el Responsive Web Desing es muy facil de aplicar y este se adapta a cualquier resolucion de pantalla :)

[emprear]

Iniciado por fredar21

Y si pruebas el Responsive Web Desing es muy facil de aplicar y este se adapta a cualquier resolucion de pantalla :)

@fredar21
"Responsive Web Desing " es una expresión genérica que puede tener mucha o ninguna relevancia en este tema, ya que engloba diferentes técnicas para poder adaptar el contenido al dispositivo en uso, a saber
media querys
modernizr
respond.js
metatags como:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
o cosas como:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

Para el caso de una PC de escritorio, de seguro muy útiles, para los móviles pueden ser sin duda soluciones muy ingeniosas, pero una vez más se cae en lo mismo, estás apostando a que los navegadores de los dispositivos puedan soportar o no dichas expresiones, muchos lo hacen, es cierto, pero muchisimos otros no.
A no ser que desees terminar haciendo 4 ó 5 páginas distintas, creo que lo primero a determinar es el objetivo y la audiencia a la que apunte nuestra Web.

Saludos