Foros del Web » Creando para Internet » HTML »

problemas con el zoom

 Estas en el tema de problemas con el zoom en el foro de HTML en Foros del Web. Hola, estoy haciendo una página por primera vez y tengo problemas cuando pruebo el zoom de los navegadores, el ctrl+. He visto muchas consultas de ...
  #1 (permalink)  
Antiguo 03/09/2015, 16:21
 
Fecha de Ingreso: octubre-2013
Mensajes: 6
Antigüedad: 10 años, 6 meses
Puntos: 0
problemas con el zoom
Hola, estoy haciendo una página por primera vez y tengo problemas cuando pruebo el zoom de los navegadores, el ctrl+. He visto muchas consultas de problemas con el zoom pero parece que no existe una solución general no?.
En mi caso particular cuando hago zoom este sólo se hace sobre lo que parece ser el borde de un select y de botones, si quito estos directamente no hace ningún zoom.
Qué se debe hacer o evitar para que el zoom funcione porque yo estoy muy perdido.
Gracias.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.             
  8.  
  9.         <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  10.         <script type="text/javascript" src="d3.v2.min.js"></script>
  11.     <style type="text/css">
  12.  html {
  13.          font-size: 10pt;
  14.     }
  15.     
  16.     #supercapa {width: 100%; margin: 0px auto; padding: 0px; background:#C0C0C0}
  17.     #capa1 {width: 35%; height: 93%; left:7.5%; top:7%; background-color: #FF0000; position:absolute;}
  18.     #capa2 {width: 35%; height: 100%; right:7.5%; top:0%; background-color: #0000FF; position:absolute;}
  19.     
  20.     select::-ms-expand {
  21.     display: none;
  22. }   
  23.     
  24.     #mySelect{
  25.                   position:absolute;
  26.                   display: inline-block;
  27.                   z-index: 3;
  28.                   -moz-appearance: none;
  29.                   -webkit-appearance: none;
  30.                   appearance:none;
  31.                   cursor: pointer;
  32.                   
  33.                   background: #a1b74b;
  34.                   left:18%;
  35.                   width: 14%;
  36.                   height: 6%;
  37.                   top: 3%;
  38.                   
  39.                   font-size:1.2vw;
  40.                   font-family:verdana;
  41.                   font-weight: bold;
  42.                   padding-left: 0.4%;
  43.                   color:#e2e3db;
  44.                    
  45.                    
  46.                    box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
  47.                    
  48.                    border: none !important;
  49.                    border-radius:2vw;
  50.                                
  51.                                   
  52.                    
  53.                 }
  54.     #mySelect:hover{ -moz-box-shadow: 0 0 18px #336600; -webkit-box-shadow: 0 0 18px #336600; box-shadow: 0 0 18px #336600; }
  55.     
  56.     
  57.     
  58.     
  59.     
  60.     </style>
  61.     
  62.     </head>
  63. <body>
  64.  
  65.         
  66.     <div id='supercapa'>
  67.                 
  68.                 
  69.                 <select id="mySelect">
  70.                     
  71.                      <option value="select">select</option>
  72.                      <option value="volvo">Volvo</option>
  73.                       <option value="saab">Saab</option>
  74.                       <option value="mercedes">Mercedes</option>
  75.                       <option value="audi">Audi</option>
  76.                     
  77.                 </select>
  78.             
  79.             
  80.         
  81.         <div id='capa1'></div>
  82.                             
  83.                 
  84.         <div id='capa2'></div>
  85.             
  86.         
  87.     </div>
  88. </body>
  89. </html>
  #2 (permalink)  
Antiguo 03/09/2015, 17:35
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: problemas con el zoom
amigo eso es porque tus medidas estan por porcentaje por mas que hagas zoom estas se adaptaran a tu pantalla y no importa cuanto zoom hagas ;)

Prueba con este codigo y veras algo de diferencia al hacer zoom ;)
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.             
  8.  
  9.         <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  10.         <script type="text/javascript" src="d3.v2.min.js"></script>
  11.     <style type="text/css">
  12.  html {
  13.          font-size: 10pt;
  14.     }
  15.     
  16.     #supercapa {width: 100%; margin: 0px auto; padding: 0px; background:#C0C0C0;}
  17.     #capa1 {width: 35%; height: 100vh; left:7.5%; top:7%; background-color: #FF0000;float: left}
  18.     #capa2 {width: 35%; height: 100vh; right:7.5%; top:0%; background-color: #0000FF;float: right;}
  19.     
  20.     select::-ms-expand {
  21.     display: none;
  22. }   
  23.     
  24.     #mySelect{
  25.                   position:absolute;
  26.                   display: inline-block;
  27.                   z-index: 3;
  28.                   -moz-appearance: none;
  29.                   -webkit-appearance: none;
  30.                   appearance:none;
  31.                   cursor: pointer;
  32.                   
  33.                   background: #a1b74b;
  34.                   left:18%;
  35.                   width: 14%;
  36.                   height: 6%;
  37.                   top: 3%;
  38.                   
  39.                   font-size:1.2vw;
  40.                   font-family:verdana;
  41.                   font-weight: bold;
  42.                   padding-left: 0.4%;
  43.                   color:#e2e3db;
  44.                    
  45.                    
  46.                    box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
  47.                    
  48.                    border: none !important;
  49.                    border-radius:2vw;
  50.                                
  51.                                   
  52.                    
  53.                 }
  54.     #mySelect:hover{ -moz-box-shadow: 0 0 18px #336600; -webkit-box-shadow: 0 0 18px #336600; box-shadow: 0 0 18px #336600; }
  55.     
  56.     
  57.     
  58.     
  59.     
  60.     </style>
  61.     
  62.     </head>
  63. <body>
  64.  
  65.         
  66.     <div id='supercapa'>
  67.                 
  68.                 
  69.                 <select id="mySelect">
  70.                     
  71.                      <option value="select">select</option>
  72.                      <option value="volvo">Volvo</option>
  73.                       <option value="saab">Saab</option>
  74.                       <option value="mercedes">Mercedes</option>
  75.                       <option value="audi">Audi</option>
  76.                     
  77.                 </select>
  78.             
  79.             
  80.         
  81.         <div id='capa1'></div>
  82.                             
  83.                 
  84.         <div id='capa2'></div>
  85.             
  86.         
  87.     </div>
  88. </body>
  89. </html>
  #3 (permalink)  
Antiguo 04/09/2015, 02:56
 
Fecha de Ingreso: octubre-2013
Mensajes: 6
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: problemas con el zoom
Vaya!, pense que el zoom del navegador trabajaba de otra manera.
Mi idea era hacer un diseño de esos llamados responsive y la primera idea que saqué leyendo por ahí fue que debía usar porcentajes. Tendré que seguir documentandome.
Gracias por responder.

Etiquetas: css, javascript, zoom
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 07:58.