¿condicional para hacer responsive una web solo en el celular y no en la pc?

Jxit3 · 28 Oct 2013

hace unos meses atrás vi una condiciona que permitía que la web solo sea responsive cuando se veía desde un celular y no desde la pc, osea que al cambiar de tamaño el navegador, la web no cambie de tamaño y solo funcione cuando este en el celular, pero he estado buscando y no lo encuentro xd, alguien me dice como buscarlo o me lo pasa?, me imagino que ha de hacer que las media query solo funcionen en el celular y no en la pc o algo así.

saludos

jonymusky · 29 Oct 2013

podrias hacer algo así como:

Insertar CODE, HTML o PHP:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "initial-scale=1.0; maximum-scale=1.0; width=device-width;");
  }
</script>

txispas · 30 Oct 2013

jonymusky dijo:

podrias hacer algo así como:

Insertar CODE, HTML o PHP:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "initial-scale=1.0; maximum-scale=1.0; width=device-width;");
  }
</script>

Solo se podria mediante jquery?

jonymusky · 30 Oct 2013

No,
Lo que está dentro del if reemplazalo por

Insertar CODE, HTML o PHP:

document.getElementsByTagName('head')[0].appendChild('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

Con eso debería funcionar.

Saludos,
Jonathan

estudiseno · 30 Oct 2013

Para eso está css [MENTION=16931]medi[/MENTION]a no se que ahora no me acuerdo pero eliges las resoluciones para que salir al igual que si a chicas el navegador.

Busca en google @ media device y encontrarás la rsspuesta

Siempre trabajando en www.estudiseno.com now Free

Jxit3 · 30 Oct 2013

creo que no entendieron mi pregunta xd, quiero que las media query no afecten a mi pagina cuando la estén viendo desde la pc, porque se ve feo que al reducir el navegador todo se encoja como en el celular, existe alguna forma?

estudiseno · 31 Oct 2013

Si pones las media con device lo que sea solo afectarán a los terminales.
Te dije que leyeras en google y buscaras información.

Pero se ve que no entendiste mi respuesta.

Siempre trabajando en www.estudiseno.com now Free

txispas · 31 Oct 2013

Jxit3 dijo:
creo que no entendieron mi pregunta xd, quiero que las media query no afecten a mi pagina cuando la estén viendo desde la pc, porque se ve feo que al reducir el navegador todo se encoja como en el celular, existe alguna forma?

Creo q si, x eso preguntaba si solo se podia cn jquery.... no recuerdo bien pero creo q podias hacer esto tmb cn los media, pero haciendo referencia al dispositivo ó S.O., eso es lo q no recuerdo ya.

Jxit3 · 31 Oct 2013

estudiseno dijo:
Si pones las media con device lo que sea solo afectarán a los terminales.
Te dije que leyeras en google y buscaras información.

Pero se ve que no entendiste mi respuesta.

Siempre trabajando en www.estudiseno.com now Free

si estuve buscando media device xd, pero nada aun, seguiré buscando, gracias.

WWWW · 31 Oct 2013

[MENTION=29794]Jxit3[/MENTION]
Lo que buscas es un código en php, que detecte cuando entra un mobil, lo envie a otra web especial para el mobil o no es esto?

algo asi

if(entra un celular ) {

m.dominio.com -> Web para Celulare´s

}else {

dominio.com -> Web normal para PC´S
}

estudiseno · 1 Nov 2013

Joder con liar la perdiz ya te pongo yo un ejemplo.

Para no modificar la web cuando achican el navegador no debes de poner por ejemplo esto

@media (min-width: 900px) {reglas css}"

por que si pones solo min-width será para todas las resoluciones.

Así le dices que como poco y como mucho para un dispositivo, vamos un horizontal y vertical:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {reglas css}

Todo los dispositivos hasta este valor seran modificados:

@media screen and (max-device-width: 640px) {reglas css}

Mira yo suelo discriminar y no marearme mucho, utilizo estas reglas normalmente:
//para tablets

@media screen and (max-device-width: 840px) {reglas css}

//para smatphones

@media screen and (max-device-width: 640px) {reglas css}

con ponerle device actuará solo para dispositivos y de 640 para abajo será la misma configuración de los divs (espero que maquetes con ello sino apaga y vamonos) y 840 para las tablets. El problema que esto está en constante evolución y no será fijo tendrás que revisar las resoluciones cada 6 meses o un año, yo lo hago cada año, y ir ajustando los valores al presente continuo:witless:

Lo puedes implementar en un nuevo **.css que queda mas limpio o directamente en tu html como las reglas css.

Si necesitas algo mas me dices.

Javieer · 1 Nov 2013

Insertar CODE, HTML o PHP:

<style>
@ media only screen and (min-width:300px) and (max-width:600px)
{
.ClaseQueSoloAfectaraCelularesAqui{}
}
</style>

kronenmix · 9 Nov 2013

function esmovil()
{
if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", strtolower ( $_SERVER['HTTP_USER_AGENT'] ) ) )
return true;
else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", strtolower ( $_SERVER['HTTP_USER_AGENT'] ) ) )
return true;
else
return false;
}

¿condicional para hacer responsive una web solo en el celular y no en la pc?

Jxit3

jonymusky

txispas

jonymusky

estudiseno

Jxit3

estudiseno

txispas

Jxit3

WWWW

estudiseno

Javieer

kronenmix

Temas similares