Tema: Problema de resoluciones
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/04/2013, 13:13
Avatar de joaquinrot
joaquinrot
 
Fecha de Ingreso: diciembre-2012
Ubicación: Córdoba
Mensajes: 11
Antigüedad: 11 años, 4 meses
Puntos: 0
Pregunta Problema de resoluciones
Buenas tardes, tengo un par de problemas, no tantos pero en fin:
Tengo una web que se adapta perfectamente a tamaños de pantalla tipo notebook o monitor de pc, el problema surge cuando lo tengo que ver desde la pantalla de un telefono, el problema es que al hacer pinch to zoom sobre la pagina esta se me distorsiona tremendamente, lo raro es que los contenedores son de tamaño dinamico, asi que no se lo que puede estar ocurriendo, quizas algo estoy haciendo mal, les agradezco cualquier ayuda para maquetar de manera correcta y que sea compatible con resoluciones de pantalla de smartphones.

Aqui les dejo el codigo css:

Código: 
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {  
    display: block;  
} 

html{
overflow-y: auto; 
background-color: transparent; 
overflow-x: hidden;
}

body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
background: #F8F8F8;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-x: hidden;
}

a:link, a:visited {
color: #77BACE;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
/*--------------menu ---------------*/
#encabezado .cssmenu { 
position: inherit;
top: 10px;
right: -2%;
width: 45em;
height: 120px;
line-height:139px;
}

#encabezado .cssmenu ul{ 
  margin: auto 30px auto auto;
}

#encabezado .cssmenu li{
  margin: auto 3px auto auto;
  float: left;
  list-style: none;
}

#encabezado .cssmenu a{
  font-size: 20px;
  font-weight: bold;
  color: #F8F8F8;
  text-decoration: none;
  padding: 40px 20px 40px 20px;
}

#encabezado .cssmenu a:hover{
  color: #F8F8F8;
  border: 1px solid #000;
  -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 40px 20px 40px 20px;
}

#encabezado .cssmenu a.active{
  color: #F8F8F8;
  border: 1px solid #000;
  -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 40px 20px 40px 20px;
}

/*---------------------------------------*/

#divsuperior {
height: 100%;
width: 100%;
z-index: 1;
background: #F8F8F8;
margin: auto auto auto auto;
}

#divinferior{
float: left;
position: fixed;
top: 0px;
height: 100%;
width: 33em;
background: #444444;
margin-left: -33em;
z-index: 2;
}

#expulsor{
position: absolute;
top: 50%; 
height: 9em;
width: 9em;
background: #444444;
margin: auto auto auto 27em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}

#imagenEx{
  position: relative;
  margin: 44% 15% auto auto;
  background: url(../imagenes/flecha.png) no-repeat;
  height: 15%;
  width: 15%;
}

#expulsor .imagenExInv{
  margin: 44% 15% auto auto;
  background: url(../imagenes/flechaInversa.png) no-repeat;
  height: 15%;
  width: 15%;
}

/* encabezado */

header#encabezado {
position: fixed;
top: 0px;
left: 40%;
height: 150px;
width: 75%;
background: #5f5f5f;
background: rgb(66,65,63); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyNDEzZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNjE2MTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(66,65,63,1) 0%, rgba(22,22,22,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,65,63,1)), color-stop(100%,rgba(22,22,22,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42413f', endColorstr='#161616',GradientType=0 ); /* IE6-8 */
z-index: 4;
}

header#encabezado .logo {
position: absolute;
top: 15px;
left: -52%;
width: 40%;
height: 80%;
z-index: 5;
}

header#encabezado .logo img{
position: absolute;
max-height: 100%; 
max-width: 145%;
min-height: 100%; 
min-width: 100%;
line-height:0px;
font-weight: 700;
text-align: left;
color: #fff;
text-shadow: 0 -1px 0 #000;
z-index: 5;
}

#fondo {
position: fixed;
top: 0px;
left: -50%;
height: 150px;
width: 300%;
background: #5f5f5f;
-ms-box-shadow:0px 3px 4px 2px #333;
-o-box-shadow:0px 3px 4px 2px #333;
-moz-box-shadow:0px 3px 4px 2px #333;
-webkit-box-shadow:0px 3px 4px 2px #333;
box-shadow:0px 3px 4px 2px #333;
background: rgb(66,65,63); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyNDEzZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNjE2MTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(66,65,63,1) 0%, rgba(22,22,22,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,65,63,1)), color-stop(100%,rgba(22,22,22,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42413f', endColorstr='#161616',GradientType=0 ); /* IE6-8 */
z-index: 0;
}
y el html:

Código: 
<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8"/>
  <title></title>
  <link rel="stylesheet" href="css/principal.css" type="text/css" media="screen" />
</head>
<body>
<header id="encabezado">
      <div class="logo"><img src="imagenes/logo.png"></img><a href="index.html">&nbsp;</a></div>
      <div id="fondo">&nbsp;</div>
      <div class="cssmenu">
        <lu>
          <li><a class="active" href="index.php">&nbsp;&nbsp;Inicio&nbsp;&nbsp;</a></li>
          <li><a href="galeria.php">&nbsp;Galeria&nbsp;</a></li>
          <li><a href="nosotros.php">Nosotros</a></li>
          <li><a href="contacto.php">Contacto</a></li>
        </lu>
      </div>
  </header>
  <div id="divsuperior">
  <div id="principal">
  </div>
<div id="noticias">
</div>
</div>
</div>
<div id="pie">
  </div>
</body>
</html>
Muchas Gracias!!