Tema: css para móviles en chrome
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/04/2015, 13:06
Gustavo1973
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años, 7 meses
Puntos: 3
css para móviles en chrome
Estoy haciendo una web adaptable a móvil y no me funciona en los celulares, no al menos en chrome bajo android.
Si cambio el ancho de los navegadores (chrome, ff, ie) por de bajo que el que setie con @media screen and (...) en el emulador de FF funciona bien, pero con el emulador de Chrome (me refiero cuando damos boton derecho -> inspeccionar elemento) siempre muestra el del full screen.
Subo el código.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <title> De Arma Viajes y Turismo </title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta name="Author" content="www.webmasterenmerlo.com.ar">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
  10. </head>
  11. <link href="http://localhost/dearma-nueva/css/header.css" rel="stylesheet" type="text/css">
  12. <script src="http://localhost/dearma-nueva/js/formularios.js" type="text/javascript"></script>
  13. <script src="http://localhost/dearma-nueva/js/menu.js" type="text/javascript"></script>
  14. <link href="http://localhost/dearma-nueva/css/estilo.css" rel="stylesheet" type="text/css">
  15. <link href="http://localhost/dearma-nueva/css/footer.css" rel="stylesheet" type="text/css">
  16.  <!-- Layous -->
  17. <link rel="stylesheet" type="text/css" href="http://localhost/dearma-nueva/css/style.css">
  18. <script src="http://localhost/dearma-nueva/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  20.  
  21. <script src="http://localhost/dearma-nueva/js/loopedslider.0.5.4.js" type="text/javascript"></script>
  22.  
  23. <script type="text/javascript" charset="utf-8">
  24.     $(function(){
  25.         $('#loopedSlider').loopedSlider();
  26.     });
  27. </script>
  28. <!-- Layous -->
  29. <body>  
  30.     <center>
  31.     <div class="contenedor">
  32.         <div class="principal">
  33.         <header>
  34.             <div class="logo">
  35.     <div class="logo2"><a href="http://localhost/dearma-nueva/index.php"><img src="http://localhost/dearma-nueva/imagenes/logo.png" border="0"></a></div>
  36.     <div class="telefono"><img src="http://localhost/dearma-nueva/imagenes/telefono.jpg"></div>
  37.     <nav id="menu"><a class="nav-mobile" id="nav-mobile"></a><ul><li><a href='http://localhost/dearma-nueva/index.php'>Home</a></li><li><a href='http://localhost/dearma-nueva/la-empresa/'>La Empresa</a></li><li><a href='http://localhost/dearma-nueva/diario/'>Nuestro Diario</a></li><li><a href='http://localhost/dearma-nueva/miniturismo/'>Miniturismo</a></li><li><a href='http://localhost/dearma-nueva/administracion/'>Administracion</a></li><li><a href='http://localhost/dearma-nueva/formas-de-pago/'>Formas de Pago</a></li><li><a href='http://localhost/dearma-nueva/galerias/'>Galerias de Fotos</a></li><li><a href='http://localhost/dearma-nueva/contactos/'>Contactos</a></li></ul></nav>
  38. </div>
  39. <div class="contlayus">
  40.     <div class="ofertas">
  41.         <div>
  42.             <a href="http://localhost/dearma-nueva/ofertas/1"><img src="http://localhost/dearma-nueva/fotos/imagenc1.jpg" border="0" alt=""></a>
  43.         </div>
  44.         <div>
  45.             <a href="http://localhost/dearma-nueva/ofertas/2"><img src="http://localhost/dearma-nueva/fotos/imagenc2.jpg" border="0" alt=""></a>
  46.         </div>
  47.         <div>
  48.             <a href="http://localhost/dearma-nueva/ofertas/3"><img src="http://localhost/dearma-nueva/fotos/imagenc3.jpg" border="0" alt=""></a>
  49.         </div>
  50.     </div>
  51.     <div class="loopedSlider">
  52.         <div id="loopedSlider">
  53.             <div class="container">
  54.                 <div style="left: 0px;" class="slides">
  55.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head.jpg"   border="0" ></a></div>
  56.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head2.jpg"   border="0" ></a></div>
  57.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head4.jpg"  border="0" ></a></div>
  58.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head3.jpg"   border="0" ></a></div>
  59.                  </div>
  60.             </div>
  61.         </div>
  62.     </div>
  63.     <div class="solapas">
  64.         <table border="0"cellpadding="2" cellspacing="0">
  65.         <tr>
  66.             <td><a href="http://www.mundigeaonline.com/dearmaturismo/" target="_blank"><img src="http://localhost/dearma-nueva/imagenes/solapa01.jpg" width="67" height="81" border="0" alt=""></a></td>
  67.             <td><a href="http://www.e-agencias.com.ar/ag12404/home/flights" target="_blank"><img src="http://localhost/dearma-nueva/imagenes/solapa02.jpg" width="67" height="81" border="0" alt=""></a></td>
  68.             <td><a href="http://dearmaturismo.plataforma10.com/Servicios" target="_blank"><img src="http://localhost/dearma-nueva/imagenes/solapa03.jpg" width="67" height="81" border="0" alt=""></a></td>
  69.         </tr>
  70.         </table>
  71.     </div>
  72.     <div class="iso9001">
  73.         <img src="http://localhost/dearma-nueva/imagenes/iso9001.png" width="114" height="107" border="0" alt="">
  74.     </div>
  75. </div>
  76. <nav id="agenda">
  77.         <a class="tit-mobile" id="tit-mobile">Agenda Viajera</a>
  78.         <ul>
  79.             <li><a >Enero</a></li>
  80.             <li><a >Febrero</a></li>
  81.             <li><a >Marzo</a></li>
  82.             <li><a >Abril</a></li>
  83.             <li><a >Mayo</a></li>
  84.             <li><a >Junio</a></li>
  85.             <li><a >Julio</a></li>
  86.             <li><a >Agosto</a></li>
  87.             <li><a >Septiembre</a></li>
  88.             <li><a >Octubre</a></li>
  89.             <li><a >Noviembre</a></li>
  90.             <li><a >Diciembre</a></li>
  91.         </ul>
  92. </nav>
  93. <div id="iconos" class="iconos">
  94.     <table border="0"cellpadding="0" cellspacing="0">
  95.     <tr>
  96.         <td><a href="http://mobile.etrk.com.ar/" target=_blank"><img src="http://localhost/dearma-nueva/imagenes/geo-pos.jpg" width="234" height="149" border="0" alt=""></a></td>
  97.         <td><a href="http://localhost/dearma-nueva/nuestra-flota/"><img src="http://localhost/dearma-nueva/imagenes/nuestra-flota.jpg" width="234" height="149" border="0" alt=""></a></td>
  98.         <td><a href="https://www.facebook.com/dearmaviajes" target=_blank"><img src="http://localhost/dearma-nueva/imagenes/facebook.jpg" width="234" height="149" border="0" alt=""></a></td>
  99.         <td><a href="http://localhost/dearma-nueva/disponibilidad-online/"><img src="http://localhost/dearma-nueva/imagenes/dispo-online.jpg" width="234" height="149" border="0" alt=""></a></td>
  100.     </tr>
  101.     </table>
  102. </div>      </header>
  103.         <section>
  104.         <div style="float:left;">
  105.                     </div>
  106.         </section>
  107.         <footer>
  108.             <center>
  109. <div id="sucursales">
  110.     <a class="suc-mobile" id="suc-mobile"></a>
  111.     <ul>
  112.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_merlo.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/1">Merlo</a></li>
  113.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_moron.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/2">Moron</a></li>
  114.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_padua.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/3">S.A. de Padua</a></li>
  115.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_hurlingham.jpg"border="1"alt="turismo"width="130"> <a href="http://localhost/dearma-nueva/sucursal/4">Hurlingham</a></li>
  116.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_flores.jpg"border="1"alt="turismo"width="130"> <a href="http://localhost/dearma-nueva/sucursal/5">Flores</a></li>
  117.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_moreno.jpg"border="1"alt="turismo"width="130"> <a href="http://localhost/dearma-nueva/sucursal/6">Moreno</a></li>
  118.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_ramos.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/7">Ramos Mej&iacute;a</a></li>
  119.     </ul>
  120. </div>
  121. </center>
  122. <div class="footer">
  123.     <div class="copy">
  124.         <a>&copy; Copyright .: de Arma Viajes y Turismo :.<br>D.N.T. Leg: 10448 - Disp. 253/99</a>
  125.     </div>
  126.     <div class="firmaw">
  127.         <a href="http://www.hgstudio.com.ar"target="_blank"><img src="http://localhost/dearma-nueva/imagenes/power_hg.png" border="0" alt=""></a>
  128.     </div>
  129.  
  130. </div>      </footer>
  131.         </div>
  132.         
  133.     </div>
  134.     </center>
  135. <script>
  136.  
  137.     $(function() {
  138.  
  139.         var btn_movil = $('#nav-mobile'),
  140.             menu = $('#menu').find('ul');
  141.  
  142.         // Al dar click agregar/quitar clases que permiten el despliegue del menú
  143.         btn_movil.on('click', function (e) {
  144.             e.preventDefault();
  145.  
  146.             var el = $(this);
  147.  
  148.             el.toggleClass('nav-active');
  149.             menu.toggleClass('open-menu');
  150.         })
  151.  
  152.     });
  153.     $(function() {
  154.  
  155.         var btn_movil = $('#tit-mobile'),
  156.             menu = $('#agenda').find('ul');
  157.  
  158.         // Al dar click agregar/quitar clases que permiten el despliegue del menú
  159.         btn_movil.on('click', function (e) {
  160.             e.preventDefault();
  161.  
  162.             var el = $(this);
  163.  
  164.             el.toggleClass('nav-active');
  165.             menu.toggleClass('open-menu');
  166.         })
  167.  
  168.     });
  169.     $(function() {
  170.  
  171.         var btn_movil = $('#suc-mobile'),
  172.             menu = $('#sucursales').find('ul');
  173.  
  174.         // Al dar click agregar/quitar clases que permiten el despliegue del menú
  175.         btn_movil.on('click', function (e) {
  176.             e.preventDefault();
  177.  
  178.             var el = $(this);
  179.  
  180.             el.toggleClass('nav-active');
  181.             menu.toggleClass('open-menu');
  182.         })
  183.  
  184.     });
  185. </script>
  186.  
  187. </body>
  188. </html>