¿En cada actualización del móvil se cambia la resolución de pantalla?

Iniciado por Drakaris, 11 Octubre 2017, 23:01 PM

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

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Drakaris

11 Octubre 2017, 23:01 PM
Hola, me pregunto esto porque, mi web esta en responsive design y con mi móvil se veía bien, hasta que hoy lo miré y esta deformado, ¿es porque se actualizó mi móvil o  porque a veces no se carga correctamente el css media querys?.

P.D: En tablet me va bien, en los móviles no, probé otros, y también me hace lo mismo.

Gracias.
Lo increible, no es lo que ves, sino como es

EFEX

#1
11 Octubre 2017, 23:56 PM
Si ves el diseño, quiere decir que descargo los estilos. Haces el responsive con css? podrias poner el codigo ?
No se en que pueda afectar hablerlo upgradeado  :huh: que cel tienes, que so y a que version lo upgradeaste ? podes buscar y ver los changelog.
GITHUB 

Drakaris

#2
12 Octubre 2017, 10:50 AM
Aquí tiene, tengo media querys css y media querys JS
Código [Seleccionar]

<html>
<head>
<!-- - - - - -TABLET- - - - - -->
<style>
@media screen and (max-width: 768px){
  .flex-caption div img{
      width: 350%;
      left: 41.6%;
  }
   
  *{
    box-sizing: border-box;
  }
  .gridwrapper a .alexia{
    position: relative;
    height: 13vw;
    top: 1vw;
  }
.gridwrapper a .moodle{
   position: relative;
  height: 13vw;
  top: 1vw;
}
.gridwrapper a .batart{
   position: relative;
  height: 15vw;
  left: 1vw;
  top: 1vw;
}
.gridwrapper a .pillospress{
  position: relative;
  height: 14vw;
  left: 2vw;
  top: 1vw;
}
.gridwrapper a .CUC{
  position: relative;
  height: 15vw;
  left: 3vw;
  top: 1vw;
}
.gridwrapper a .weib{
  position: relative;
  height: 15vw;
  left: 2.5vw;
  top: 0.5vw;
}
.gridwrapper a .bloggeries{
  position: relative;
  height: 15vw;
  top: -15vw;
  left: 55vw;
}
.gridwrapper a .erasmus{
  position: relative;
  height: 15vw;
  top: 1vw;
  left:-35vw;
}
.gridwrapper a .GESTIB2{
  position: relative;
  height: 12vw;
  top: 1vw;
  left:43vw;
  top:-13vw;
}
.gridwrapper a .mail{
  color: skyblue;
  position: relative;
  bottom: -15%;
  font-size: 15vw;
  left: -37%;
}
.gridwrapper a .telefono{
    color: orange;
    position: relative;
    font-size: 15vw;
    bottom: -15%;
    left: -17%;
}
.gridwrapper a .fax1{
    color: green;
    font-size: 15vw;
    position: relative;
    top: 14.7%;
    left: 3%;
}
.gridwrapper a .equipo{
  position: relative;
  color: blue;
  font-size: 15vw;
  bottom: -20%;
  left: 26%;
}
.gridwrapper a .descarga{
  position: relative;
  color: red;
  font-size: 15vw;
  bottom: -20%;
  left: 47%;
}
.gridwrapper .social div a{
  color: white;
  font-size: 4vw;
  text-align: center;
  width: 200%;
  height: 0%;
  padding: 40% 0% 40% 0%;
  display: inline-block;
  text-decoration: none;
}
}
</style>
<!-- - - - - - - - - - - - - - -->
<!-- - - - - -MÓVIL- - - - - - -->
<style>
@media screen and (max-width: 600px){
  .flex-caption .logos-iescalvia .ies-calvia{
    left: 2vw;
    width: 10vw;
    display: none;
  }
  .flex-caption .logos-iescalvia .Aenor{
    left: 2vw;
    width: 10vw;
    display: none;
  }
  .flex-caption .logos-iescalvia .CERTIFIED-IQNet{
    width:10vw;
    left:2vw;
    display: none;
  }
  .portadam{
    width: 130%;
  }
  .portadam div{
    width:  100%;
    position: relative;
    top: all;
  }
  .flex-caption div{
    width:100%;
    left:0%;
    top: 10%;
    position: absolute;
  }
  .flex-caption .logo_page img{
    width:100%;
  }
  .gridwrapper a .alexia{
    position: relative;
    height: 33vw;
    top: 1vw;
  }
  .gridwrapper a .moodle{
    position: relative;
    height: 30vw;
    top: 1vw;
  }
  .gridwrapper a .batart{
    position: relative;
    height: 30vw;
    top: 1vw;
    left: 5%;
  }
  .gridwrapper a .pillospress{
    top: 2%;
    height: 30vw;
  }
  .gridwrapper a .CUC{
    top: 2%;
    height: 30vw;
  }
  .gridwrapper a .weib{
    position: relative;
    height: 25vw;
    top: 2%;
  }
  .gridwrapper a .GESTIB2{
    position: relative;
    height: 16vw;
    top: -16%;
    left: 50%;
  }
  .gridwrapper a .erasmus{
    height: 25vw;
    top: 3%;
    position: relative;
    left: -46%;
  }
  .gridwrapper a .bloggeries{
    height: 25vw;
    top: 3%;
    position: relative;
    left: 50%;
  }
  .gridwrapper a .mail{
    color: skyblue;
    position: relative;
    bottom: -15%;
    font-size: 20vw;
    left: -38%; 
  }
  .gridwrapper a .telefono{
    color: orange;
    position: relative;
    font-size: 20vw;
    bottom: -15%;
    left: -18%;
  }
  .gridwrapper a .fax1{
    color: green;
    font-size: 20vw;
    position: relative;
    top: 14.7%;
    left: 1%;
  }
  .gridwrapper a .equipo{
    position: relative;
    color: blue;
    font-size: 20vw;
    bottom: -20%;
    left: 27%;
  }
  .gridwrapper a .descarga{
    position: relative;
    color: red;
    font-size: 25vw;
    bottom: -20%;
    left: 46%;
  }
  .gridwrapper .social div a{
    color: white;
    font-size: 8vw;
    text-align: center;
    width: 200%;
    height: 0%;
    padding: 20% 0% 20% 0%;
    display: inline-block;
    text-decoration: none;
  }
}
</style>
<!-- - - - - - - - - - - - - - -->
<style>
    *{
        box-sizing: border-box;
    }
</style>
<style>
   
     body::-webkit-scrollbar-track
{
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: rgb(191,191,191);
}
body::-webkit-scrollbar
{
    width: 12px;
    background-color: none;
    border: none;
}

body::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: orange;
}

</style>
<script>
    function cambiarmapa() {
        cambiarcalles = document.getElementById("mapa_sitio");
        cambiarcalles.setAttribute("src","imagenes/mapa_iescalvia_calles.jpg");
        cambiarenlace = document.getElementById("url");
        cambiarenlace.setAttribute("href","http://ies-calvia.260mb.net/imagenes/mapa_iescalvia_calles.jpg");
        cambiarenlace_googlemaps = document.getElementById("url_googlemaps");
        cambiarenlace_googlemaps.setAttribute("href","https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es")
    }
    function cambiarsatelite() {
        cambiar_satelite = document.getElementById("mapa_sitio");
        cambiar_satelite.setAttribute("src","imagenes/mapa_iescalvia_satelite.jpg");
        cambiar_enlace = document.getElementById("url");
        cambiar_enlace.setAttribute("href","http://ies-calvia.260mb.net/imagenes/mapa_iescalvia_satelite.jpg");
        cambiarenlace_googlemaps1 = document.getElementById("url_googlemaps");
        cambiarenlace_googlemaps1.setAttribute("href","https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,1067m/data=!3m1!1e3!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es");
    }
</script>
<style>
    .btn1{
        background: transparent;
        cursor: pointer;
        border: none;
    }
</style>
<style type="text/css">
    .diseño_franja{
        position: relative;
        height: 60%;
        width:1366px;
        bottom: -20%;
        background-color: white;
        left: -8px;
    }
</style>
<style>
    .red{
        position: fixed;
        top: 200px;
        z-index: 100;
        left: 0;
    }
    .social div a{
        color: white;
        font-size: 1.5vw;
        text-align: center;
        width: 200%;
        height: 0%;
        padding: 30% 0% 30% 0%;
        display: inline-block;
        text-decoration: none;
    }
    .facebook{
        background: #3b5998;
        border-radius: 0 1rem 0 0;
    }
    .youtube{
        background: #bb0000;
    }
    .googleplus{
        background: #dd4b39;
    }
    .correo{
        background: #666666;
    }
    .telf{
        background: #FE9A2E;
    }
    .mensaje{
        background: skyblue;
        border-radius: 0 0 1rem 0;
       
    }
    .social a:hover{
        width: 70px;
        border-radius: 0 1rem 1rem 0;
        -webkit-transition: 600ms;
        -o-transition: 600ms;
        -ms-transition: 600ms;
    }
    .social div a:hover{
        width: 320%;
    }
</style>
<style>
    .display{
        position: fixed;
        right: 10px;
        bottom: -10px;
        width: 120px;
        height: 45px;
        background: rgba(139,139,139,0.9);
        border-radius: 10px;
        font-size: 20px;
        font-family: segoe script;
        src: url("DS-DIGIT.TTP") format("truetype");
        text-align: center;
    }
</style>
<style type="text/css">
    .diseno_franja{
        position: relative;
        height: 60%;
        width:1242px;
        bottom: -20%;
        background-color: white;
        left: -8px;
    }
</style>
<style>
  .btn {
    background: linear-gradient(#F5D0A9,#F7BE81,#FAAC58,#FE9A2E,#FF8000);
    border: transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    margin: 5px;
  }
.btn:hover {
   background: linear-gradient(#A9A9F5,#8181F7,#5858FA,#2E2EFE,#0000FF);
  }
</style>
<style>
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
</style>
<title>G.T.E</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="imagenes/logo_GTE.ico">
<link rel="stylesheet" type="text/css" href="slider13.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-flexslider.js" type="text/javascript"></script>
<script src="jquery-flexslider-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    if (window.matchMedia("(max-width: 768px)").matches){
      $("#header").remove();
      logo123 = document.getElementById("logoGTE");
      logo123.setAttribute("style","width:60%; top:1vh; left:20%; position:absolute;");
      //cambiar portada para tablet y dimensiones
      portada = document.getElementById("portada1");
      portada.setAttribute("src","imagenes/portada_movil.jpg");
      dimensionesY = document.getElementById("portada1");
      dimensionesY.setAttribute("style", "height:100%;");
      //cambiar fondo para tablet
    fondo12 = document.getElementById("fondo1");
    fondo12.setAttribute("style","background-image: url('imagenes/fondo_movil.jpg'); background-repeat:no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color:#F5ECCE;");
    //Agrandar el título y cambiar su posición
    title = document.getElementById("titulo");
    title.setAttribute("style","width:83.33%; left:9.5%; position:absolute; top:65%;");
    //Agrandar botón de entrada
    enter = document.getElementById("entry");
    enter.setAttribute("style","font-size: 15vw; left: 46%; position: absolute; top: 78%; color: #FFBF00; cursor:pointer;");
    //Cambiar medida del footer
    pie = document.getElementById("footer");
    pie.setAttribute("style","height: 110vw;");
    //enlace dirección
    $("#contactos_div").append("<a href='https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es' target='_blank' style='color: black; text-decoration: none;'><font face='segoe script' color='#666666' style='bottom:3vmin; position: absolute; left:10%; font-size:4vw;' id='address1'>IES Calvi&aacute;. Avda Son Pillo 1.07180</font></a>");
  }
  if (window.matchMedia("(max-width: 600px)").matches){
    //ajustar el fondo de pantalla al móvil
    fondo12 = document.getElementById("fondo1");
    fondo12.setAttribute("style","background-image: url('imagenes/fondo_movil.jpg'); background-repeat:no-repeat; background-position: center center; background-attachment: fixed; background-size: 200%; background-color:#F5ECCE;");
    //ajustar la portada al móvil
    dimensionesY = document.getElementById("portada1");
    dimensionesY.setAttribute("style", "height:100%;");
    //Cambiar el footer
    foot = document.getElementById("footer");
    foot.setAttribute("style","width:130vw; height:160vh;");
    //Modificar el texto "contactos" para móvil
    contact = document.getElementById("contacts");
    contact.setAttribute("style","bottom:105vmin; position: absolute; left:30%; font-size:16vw;");
    //Modificarla dirección del instituto para móvil
    address2 = document.getElementById("address1");
    address2.setAttribute("style","bottom:5vmin; position: absolute; left:10%; font-size:9vw;");
}
});
</script>
<style>
* {
    box-sizing:border-box;
}
.gridwrapper {
    overflow:auto;
    position:relative;
    height:250px;
}
.gridwrapper .iescalvia{
  width: 10%;
}
.gridwrapper .aenor{
  height: 7vw;
  position: relative;
  left: 1%;
}
.gridwrapper .CERTIFIED_IQNet{
  width: 7%;
  position:relative;
  left:2.5%;
}
.gridwrapper .imagen_ubicacion{
  width: 16.66%;
  position: relative;
  left: 34%;
  height:7vw;
}
.gridwrapper .boton_mapa {
  color: green;
  font-size: 1.5vw;
  left: 34.4vw;
  position: relative;
  bottom: 2vw;
  cursor: pointer;
}
.gridwrapper .boton_satelite{
  color: blue;
  font-size: 2vw;
  position: relative;
  left: 32.5vw;
  bottom: 5vw;
  cursor: pointer;
}
.gridwrapper .texto_iescalvia{
  position: relative;
  left: 35vw;
  bottom: 4vw;
  font-size: 1.5vw;
}
.gridwrapper .texto_direccion{
  position: relative;
  left: 76vw;
  bottom: 4vw;
  font-size: 1.5vw;
}
.gridwrapper .alexia{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .moodle{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .batart{
  position: relative;
  height: 5vw;
  left: 1vw;
  top: 1vw;
}
.gridwrapper .pillospress{
  position: relative;
  height: 5vw;
  left: 2vw;
  top: 1vw;
}
.gridwrapper .CUC{
  position: relative;
  height: 5vw;
  left: 3vw;
  top: 1vw;
}
.gridwrapper .weib{
  position: relative;
  height: 5vw;
  left: 2.5vw;
  top: 0.5vw;
}
.gridwrapper .bloggeries{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .erasmus{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .GESTIB2{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .mail{
  color: skyblue;
  position: relative;
  bottom: 38%;
  font-size: 3vw;
  left: 27.7%;
}
.gridwrapper .telefono{
  color: orange;
  position: relative;
  font-size: 3vw;
  bottom: 15%;
  left: 24.4%;
}
.gridwrapper .fax1{
  color: green;
  font-size: 3vw;
  position: relative;
  top: 10%;
  left: 21%;
}
.gridwrapper .equipo{
  position: relative;
  color: blue;
  font-size: 3vw;
  bottom: 35%;
  left: 29%;
}
.gridwrapper .descarga{
  position: relative;
  color: #FE2E2E;
  font-size: 3vw;
  left: 26%;
}
.gridcontent {
  width:8.33%;
  margin:0;
  border-right:1px solid grey;
  height:100%;
  float:left;
  background-color:#84c754;
  background-color:#f1f1f1;
}
</style>
</head>
<body style="background-image: url(&quot;imagenes/stackofmagazines.jpg&quot;); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover;" id="fondo1">
<div style="position:absolute;opacity:1;width:auto;left:0px;right:0px;" class="todo">
<div class="gridcontainer">
<div class="gridwrapper" style="height:160%;" id="header">
<!-- header -->
    <a href="http://www.iescalvia.com" target="_blank" style="text-decoration: none;">
      <img src="imagenes/iescalvia.png" class="iescalvia">
    </a>
    <img src="imagenes/logo_aenor.png" class="aenor">
    <img src="imagenes/CERTIFIED_IQNet.png" class="CERTIFIED_IQNet">
    <a href="http://g-t-e.260mb.net/imagenes/mapa_iescalvia_calles.jpg" target="_blank" style="cursor: zoom-in; text-decoration: none;" id="url">
      <img src="imagenes/mapa_iescalvia_calles.jpg" id="mapa_sitio" class="imagen_ubicacion">
    </a>
    <i class="fa fa-map boton_mapa" onclick="cambiarmapa()" title="Modo mapa"></i>
    <i class="fa fa-globe boton_satelite" onclick="cambiarsatelite()" title="Modo satelital"></i>
    <a href="https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es" target="_blank" id="url_googlemaps" style="color: black; text-decoration: none;">
      <font face="segoe script" class="texto_iescalvia">IES Calvi&aacute;</font>
      <br>
      <font face="segoe script" class="texto_direccion">Avda Son Pillo 1. 07180</font>
    </a>
</div>
<div class="gridwrapper portadam" style="height:100%;" id="body">
<!-- Contenido -->
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="imagenes/bg-slider-pizarra.jpg" alt="" id="portada1" style="">
                <section class="flex-caption" id="contenido_portada">
                  <div class="logo_page">
                    <img src="imagenes/logo_GTE.png" id="logoGTE" style="">
                  </div>
                  <div id="logos_iescalvia" class="logos-iescalvia"></div>
                  <img src="imagenes/titulo6.png" style="width:33.33%; left:33.3%; position:absolute; top:65%;" id="titulo">
                  <i class="fa fa-sign-in" style="font-size: 3.5vw; left: 49%; position: absolute; top: 76%; color: #FFBF00; cursor:pointer;" onclick="location.href='GTE/'" title="entrar" id="entry"></i>
                </section>
            </li>
        </ul>
    </div>
</div>
<div class="gridwrapper" style="height:15vw;" id="footer">
  <!-- footer -->
    <a href="https://web2.alexiaedu.com/ACWeb/LogOn.aspx?key=WRcKBnV4m3M%3d" target="_blank" style="text-decoration: none;"><img src="imagenes/Alexia1.png" class="alexia" title="Alexia"></a>
    <a href="http://moodle2.iescalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/moodle.png" class="moodle" title="Moodle"></a>
    <a href="https://www.bachilleratoartistico-iescalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/batart.png" class="batart" title="Bachillerato art&iacute;stico"></a>
    <a href="http://iescalviablog.blogspot.com.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/pillospress.png" class="pillospress" title="pillo's press"></a>
    <a href="http://www.cucalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/CUC.png" class="CUC" title="CUC"></a>
    <a href="http://weib.caib.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/weib.png" class="weib" title="weib"></a>
    <br>
    <a href="http://iescalvia.blogspot.com.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/bloggeries.png" class="bloggeries" title="Informaci&oacute;n del IES Calvi&aacute;"></a>
    <a href="http://www.erasmusplus.gob.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/erasmus.png" class="erasmus" title="Erasmus"></a>
    <a href="https://www3.caib.es/xestib/xestib/menu/iniciGestio" target="_blank" style="text-decoration: none;"><img src="imagenes/GESTIB2.0.jpg" class="GESTIB2" title="GESTIB 2.0"></a>
    <a href="mailto:iescalvia@gmail.com"><i class="fa fa-envelope mail" title="iescalvia@gmail.com"></i></a>
    <a href="tel:+34 971690229"><i class="fa fa-tty telefono" title="+34 971690229"></i></a>
    <a href="fax:+24 971694931"><i class="fa fa-fax fax1" title="+34 971694931"></i></a>
    <a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank" style="text-decoration: none;" title="¿Quienes somos?"><i class="fa fa-users equipo" id="equipo18"></i></a>
    <a href="guia.pdf" download="guia.pdf"><i class="fa fa-file-pdf-o descarga"></i></a>
    <div class="red">
            <div class="social">
                <div><a href="https://www.facebook.com/ies.calvia" target="_blank" class="fa fa-facebook-square facebook"></a></div>
                <div><a href="https://www.youtube.com/user/iescalviablog" target="_blank" class="fa fa-youtube-play youtube"></a></div>
                <div><a href="https://plus.google.com/114947718295379948989" target="_blank" class="fa fa-google-plus googleplus"></a></div>
                <div><a href="mailto:iescalvia@gmail.com" class="fa fa-envelope correo" title="iescalvia@gmail.com"></a></div>
                <div><a href="tel:+34971690229" class="fa fa-volume-control-phone telf" title="+34 971690229"></a></div>
                <div><a href="fax:+34971694931" class="fa fa-fax mensaje" title="+34 971694931"></a></div>
            </div>
    </div>
</div>
<!-- Contactos -->
<div id="contactos_div"></div>
</div>
</div>
</body>
</html>   
Lo increible, no es lo que ves, sino como es

EFEX

#3
13 Octubre 2017, 04:24 AM
Como se deberia ver ? lo dices por el contenido que esta uno al lado del otro y no colapsa en menores resoluciones?

Si hiciste la pagina con un editor de paginas web?
GITHUB 
Imprimir
Ir Arriba Páginas1
Acciones del Usuario