Autor
|
Tema: ¿En cada actualización del móvil se cambia la resolución de pantalla? (Leído 2,926 veces)
|
Drakaris
Desconectado
Mensajes: 286
Todo lo que puedas imaginar, lo puedes crear.
|
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.
|
|
|
En línea
|
Lo increible, no es lo que ves, sino como es
|
|
|
EFEX
Desconectado
Mensajes: 1.171
"Dinero Facil"
|
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 que cel tienes, que so y a que version lo upgradeaste ? podes buscar y ver los changelog.
|
|
|
En línea
|
|
|
|
Drakaris
Desconectado
Mensajes: 286
Todo lo que puedas imaginar, lo puedes crear.
|
Aquí tiene, tengo media querys css y media querys JS <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á. 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("imagenes/stackofmagazines.jpg"); 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á</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í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ón del IES Calviá"></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>
|
|
|
En línea
|
Lo increible, no es lo que ves, sino como es
|
|
|
EFEX
Desconectado
Mensajes: 1.171
"Dinero Facil"
|
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?
|
|
|
En línea
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
por que el lenguaje C/C++ cambia en cada compilador
Programación C/C++
|
linux1
|
8
|
3,886
|
24 Junio 2010, 20:46 pm
por Eternal Idol
|
|
|
Ayuda: cada ves que imprimo mi variable Float, cambia el contenido e.e
Programación C/C++
|
grox1
|
7
|
3,395
|
13 Noviembre 2014, 04:18 am
por rir3760
|
|
|
Con cada actualización… ¿tu móvil va más lento?
Noticias
|
wolfbcn
|
0
|
838
|
6 Octubre 2015, 21:36 pm
por wolfbcn
|
|
|
Esta web cambia de URL cada vez que alguien la visita, suerte intentando ....
Noticias
|
wolfbcn
|
5
|
2,169
|
14 Enero 2018, 20:46 pm
por z3nth10n
|
|
|
Se cambia sola la resolucion AYUDAAAA!!
Hardware
|
arata64
|
2
|
1,975
|
19 Enero 2018, 11:43 am
por Orubatosu
|
|