 Autor
|
Tema: Como bloquear el zoom de mi pagina web para tabletas y moviles? (Leído 12,388 veces)
|
Drakaris
 Desconectado
Mensajes: 286
Todo lo que puedas imaginar, lo puedes crear.
|
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 pm por Drakaris »
|
En línea
|
Lo increible, no es lo que ves, sino como es
|
|
|
|
engel lex
|
como tenemos tiempo diciendote, eso no es por javascript y es mala idea por javascript... en el head de tu pagina colocas esto <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
Mensajes: 731
|
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
Mensajes: 286
Todo lo que puedas imaginar, lo puedes crear.
|
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=sharingpero , 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 pm por Drakaris »
|
En línea
|
Lo increible, no es lo que ves, sino como es
|
|
|
|
engel lex
|
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
Mensajes: 731
|
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. <main> Blah blah blah Blah blah blah Blah blah blah </main>
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 }
|
|
|
|
« Última modificación: 7 Septiembre 2017, 12:22 pm por gAb1 »
|
En línea
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
|
La OCU ha denunciado a 24 fabricantes de teléfonos móviles y a 16 de tabletas
Noticias
|
wolfbcn
|
0
|
1,872
|
22 Diciembre 2014, 02:37 am
por wolfbcn
|
|
|
|
La biometría se abre camino en productos de consumo como móviles y tabletas
Noticias
|
r32
|
0
|
1,346
|
5 Abril 2015, 02:22 am
por r32
|
|
|
|
¿Como optimizar mi fondo de página web para móviles y tablets?
Desarrollo Web
|
Drakaris
|
0
|
4,662
|
10 Febrero 2018, 20:08 pm
por Drakaris
|
|
|
|
como bloquear una sala de zoom
Hacking
|
lu5end
|
1
|
4,482
|
6 Noviembre 2020, 15:33 pm
por MCKSys Argentina
|
|
|
|
Bloquear acceso a zoom y tiktok en la red
Redes
|
jormens
|
6
|
4,323
|
3 Diciembre 2021, 23:03 pm
por jormens
|
 |
