Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Drakaris en 31 Agosto 2017, 12:02 pm



Título: Como bloquear el zoom de mi pagina web para tabletas y moviles?
Publicado por: Drakaris en 31 Agosto 2017, 12:02 pm
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.


Título: Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
Publicado por: engel lex en 31 Agosto 2017, 13:28 pm
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" />


Título: Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
Publicado por: gAb1 en 31 Agosto 2017, 19:35 pm
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.


Título: Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
Publicado por: Drakaris en 6 Septiembre 2017, 23:13 pm
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


Título: Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
Publicado por: engel lex en 7 Septiembre 2017, 00:46 am
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


Título: Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
Publicado por: gAb1 en 7 Septiembre 2017, 12:16 pm
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 }