elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Deseas probar algunas mejoras a la interfaz del foro? Prueba cake! acerca de


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como bloquear el zoom de mi pagina web para tabletas y moviles?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como bloquear el zoom de mi pagina web para tabletas y moviles?  (Leído 325 veces)
Drakaris

Desconectado Desconectado

Mensajes: 66


Lo increíble no es lo que ves, sino como es


Ver Perfil
Como bloquear el zoom de mi pagina web para tabletas y moviles?
« en: 31 Agosto 2017, 12:02 »

Hola, quisiera impedir que se haga zoom (-),es decir hacer la página más pequeña en mi página web con los moviles y tabletas, se que es con el meta tag, lo probé pero no me funciona, y me preguntaba se había algún código JS
que haga eso.


Gracias.


« Última modificación: 31 Agosto 2017, 12:31 por Drakaris » En línea

engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 12.545



Ver Perfil
Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
« Respuesta #1 en: 31 Agosto 2017, 13:28 »

como tenemos tiempo diciendote, eso no es por javascript y es mala idea por javascript...


en el head de tu pagina colocas esto
Código
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
gAb1


Desconectado Desconectado

Mensajes: 720


Ver Perfil
Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
« Respuesta #2 en: 31 Agosto 2017, 19:35 »

No deberías hacer eso, algunas personas tienen problemas de visión y necesitan hacer zoom, otras simplemente les gusta poder ver las cosas grandes, hay muchas razones por las que un usuario quiera hacer zoom... No es algo que afecte a tu diseño negativamente (o no debería. si se deforman las cosas es que has hecho algo mal y deberías arreglarlo).

Si tienes cualquier problema con el zoom, dinos de que se trata y podremos ofrecerte una solución.
En línea

Drakaris

Desconectado Desconectado

Mensajes: 66


Lo increíble no es lo que ves, sino como es


Ver Perfil
Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
« Respuesta #3 en: 6 Septiembre 2017, 23:13 »

No me entendieron.
Es que yo en mi móvil se vé mal, es decir, el diseño gráfico, sí va bien, se ve así, https://drive.google.com/file/d/0B6mh5xJztGS9SlVBZldQeTNZekE/view?usp=sharing
pero , se puede hacer zoom (más pequeño) y se vé mal,  el fondo es pequeño, no cubre toda la pantalla, y la portada también, así se queda,https://drive.google.com/file/d/0B6mh5xJztGS9cjBtRXoyVEZOZ1E/view?usp=sharing,
https://drive.google.com/file/d/0B6mh5xJztGS9Z0tqSFFhc0RsX0E/view?usp=sharing, y lo que quisiera sería hacer una función jQuery que impidiera hacer zoom (más pequeño) y que se vea la pantalla con las medidas que yo quieras, pero si no se puede hacer ambas cosas, quisiera saber porque me pasa eso. Y que solución me podrían dar.

Gracias

P.D: He probado todo lo que me han dicho pero lamentablemente no me ha funcionado
« Última modificación: 6 Septiembre 2017, 23:16 por Drakaris » En línea

engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 12.545



Ver Perfil
Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
« Respuesta #4 en: 7 Septiembre 2017, 00:46 »

si lo hiciste todo por js en lugar de css puede ser que se esté calculando todo en base a supuestos y no a un view real como lo haría css... por eso es mala practica
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
gAb1


Desconectado Desconectado

Mensajes: 720


Ver Perfil
Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
« Respuesta #5 en: 7 Septiembre 2017, 12:16 »

No se debe usar nunca javascript para el diseño base de una web, para efectos y galerías, etc no hay ningún problema, pero para el diseño base solo se debe usar CSS.

El problema seguramente es que estás usando pixeles en los break points (media queries) y no todos los dispositivos móviles tienen la misma resolución ni el mismo pixel ratio. A parte si haces zoom se queda estático el diseño.

Para solucionar esto tienes que implementar un diseño fluido que escale en base al ancho del viewport del dispositivo. Esto se hace usando los viewport units de CSS3:

1vw = 1% del total del ancho del viewport (area visible) sin contar el scrollbar.
1vh = 1% del total del alto del viewport (area visible) sin contar el scrollbar.

Pero no confundas el ancho y alto del <body> con el ancho y alto del viewport, mientras el ancho suele ser casi (scrollbar) el mismo en ambos casos, el alto no lo suele ser.

Entonces para el tamaño de los elementos, tienes que usar vw para el width y vh para el height, aunque a veces conviene usar vw para ambos.

Y para entender realmente como funciona, no hay nada mejor que un rápido ejemplo para que te hagas una idea: https://jsfiddle.net/r4xhrd25/2 Entra ahí y mueve el borde izquierdo donde se muestra el output para redimensionar y ver como escala fluidamente.

Código
  1.  <h1>My Website</h1>
  2. <main>
  3.  <section>
  4.    <h2>Heading Title</h2>
  5.    <article>
  6.      <p>
  7.      Blah blah blah<br>
  8.      Blah blah blah<br>
  9.      Blah blah blah
  10.      </p>
  11.      <p>
  12.      Blah blah blah<br>
  13.      Blah blah blah<br>
  14.      Blah blah blah
  15.      </p>
  16.      <p>
  17.      Blah blah blah<br>
  18.      Blah blah blah<br>
  19.      Blah blah blah
  20.      </p>
  21.    </article>
  22.  </section>
  23. </main>

Código
  1. header {
  2.  width: 100%;
  3.  height: calc(100vw / (1920 / 800));
  4.  background-image: url('http://via.placeholder.com/1920x800');
  5.  background-size: cover;
  6.  background-repeat: no-repeat;
  7.  background-position: center center;
  8. }
  9. header > h1 { text-align: center; font-size: 4vw }
  10. main { width: 100%; height: auto }
  11. section { background-color: red }
  12. section > h2 { text-align: center; font-size: 3vw }
  13. section > article { display: flex }
  14. section > article > p { margin: 2vw auto; font-size: 2vw }
« Última modificación: 7 Septiembre 2017, 12:22 por gAb1 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines