Como bloquear el zoom de mi pagina web para tabletas y moviles?

Iniciado por Drakaris, 31 Agosto 2017, 12:02 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Drakaris

31 Agosto 2017, 12:02 PM Ultima modificación: 31 Agosto 2017, 12:31 PM por Drakaris
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.
Lo increible, no es lo que ves, sino como es

engel lex

#1
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 (html4strict) [Seleccionar]
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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

#2
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.

Drakaris

#3
6 Septiembre 2017, 23:13 PM Ultima modificación: 6 Septiembre 2017, 23:16 PM por Drakaris
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
Lo increible, no es lo que ves, sino como es

engel lex

#4
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
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

#5
7 Septiembre 2017, 12:16 PM Ultima modificación: 7 Septiembre 2017, 12:22 PM por gAb1
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 (html5) [Seleccionar]
<header>
 <h1>My Website</h1>
</header>
<main>
 <section>
   <h2>Heading Title</h2>
   <article>
     <p>
     Blah blah blah<br>
     Blah blah blah<br>
     Blah blah blah
     </p>
     <p>
     Blah blah blah<br>
     Blah blah blah<br>
     Blah blah blah
     </p>
     <p>
     Blah blah blah<br>
     Blah blah blah<br>
     Blah blah blah
     </p>
   </article>
 </section>
</main>

Código (css) [Seleccionar]
header {
 width: 100%;
 height: calc(100vw / (1920 / 800));
 background-image: url('http://via.placeholder.com/1920x800');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
}
header > h1 { text-align: center; font-size: 4vw }
main { width: 100%; height: auto }
section { background-color: red }
section > h2 { text-align: center; font-size: 3vw }
section > article { display: flex }
section > article > p { margin: 2vw auto; font-size: 2vw }
Imprimir
Ir Arriba Páginas1
Acciones del Usuario