[Resolvido] Problemas com Iphone

[Eduardo Kalsing 0]

Galera, vejam o seguinte site: http://www.facsom.com.br/raddycal

 

Como podem ver, a ideia é abrir o site totalmente centralizado, independente de resolução. Testei nos 5 principais navegadores (Chrome, Mozilla, Safari, Opera e IE) e testei também no Android, tanto na posição horizontal, quanto vertical (navegador Opera). Em todos estes casos, funcionou corretamente.

 

Eis que fui testar no Iphone. Deixando o celular na posição vertical, funciona corretamente, porém, ao deixar na posição horizontal, a div "main" se desloca. Abaixo, o código HTML e CSS.

 

HTML:

<div id="main">
   	<div id="meio-e">
          	<h1>Raddycal Speakers - Alto-falantes</h1>
               <img src="imgs/logotipo-raddycal.png" alt="Logotipo Raddycal" title="Logotipo Raddycal" class="logotipo"/>
               <a href="imgs/catalogo.pdf" class="link-download" target="_blank"><img src="imgs/botao-download.png" alt="Clique para fazer download do nosso catálogo" title="Clique para fazer download do nosso catálogo" /></a>
               <p class="txt-apresentacao">A Raddycal chega com tudo no mercado brasileiro, apresentando as novidades em caixas acústicas, caixas de embutir, caixas anguladas e eletrônicos, especialmente para você que não abre mão de ter alta tecnologia pelo menor preço. Isso é Raddycal.</p>
               <div class="distribuicao">
               	<div class="dist-e">
                   	<p class="cidade">SÃO PAULO:</p>
                       <p class="distribuidora">Masthermix Distribuidora: <br/>011 4035 4570</p>
                       <p class="distribuidora">Abravi Representações Ltda: <br/> 011 2275 3288 | 011 8354 8014</p>
                   </div>
                   <div class="dist-d">
                   	<p class="cidade">RIO DE JANEIRO:</p>
                       <p class="distribuidora">André  Dumard: 021 7837 3023</p>
                       <p class="dist-facsom">Distribuidor oficial no Brasil:</p>
                       <div>
                       	<a href="http://www.facsom.com.br" target="_blank"><img src="imgs/logo-facsom.png" alt="Logotipo Facsom" title="Logotipo Facsom" /></a>
                       </div>
                       <p class="facsom-dados"><a href="http://www.facsom.com.br" target="_blank">www.facsom.com.br</a> | 51 3066 1888</p>
                   </div>
               </div>
           </div>
           <div id="meio-d">
           	<h2>Estamos desenvolvendo nosso site. Enquanto isso, entre em contato conosco:</h2>
               <form action="contato.php" method="POST">
               <table>
               	<tr><td width="338">Nome</td></tr>
                   <tr><td width="338"><input type="text" name="nome" class="campo-texto" maxlength="50"/></td></tr>
                   <tr><td width="338">E-mail</td></tr>
                   <tr><td width="338"><input type="text" name="email" class="campo-texto" maxlength="30"/></td></tr>
                   <tr><td width="338">Fone</td></tr>
                   <tr><td width="338"><input type="text" name="fone" class="campo-texto" maxlength="15"/></td></tr>
                   <tr><td width="338">Mensagem</td></tr>
                   <tr><td width="338"><textarea cols="5" name="mensagem"></textarea></td></tr>
                   <tr><td align="right" width="338"><input type="submit" value=""/></td></tr>
               </table>
               </form>
           </div>
       </div>
   </div>

 

CSS:

/* CSS Document */
body{
background: url(../imgs/background.jpg) fixed no-repeat center;
font-family: Tahoma, Geneva, sans-serif;

}
img {
border: 0;	
}
h1{
display: none;	
}
#main{
height: 600px;
width: 915px;
top: 50%;
left: 50%;
position: absolute;
padding: 0;	
margin: -300px auto 0 -457px;
}
#meio-e{
	margin: 0;
	padding: 0;
	width: 480px;
	height: 100%;	
	float: left;	
}
.logotipo{
	margin: 90px 0 0 0;
	padding: 0;	
}
.link-download img{
	margin: 20px 0 0 0;
	padding: 0;	
}
.txt-apresentacao{
	margin: 10px 0 0 0;
	padding: 0;
	width: 405px;
	font-size: 13px;
	text-align: justify;
	color: #FFF;
}
.distribuicao{
	margin: 25px 0 0 0;
	padding: 0;	
}
.cidade{
	font-weight: bold;
	font-size: 12px;
	color: #FFF;
	margin: 0;
	padding: 0;	
}
.distribuidora{
	font-size: 11px;
	color: #FFF;
	margin: 5px 0 0 0;
	padding: 0;	
}
.dist-e{
	margin: 0;
	padding: 0;
	width: 190px;
	float: left;
}
.dist-d{
	margin: 0;
	padding: 0;
	width: 210px;
	float: left;	
}
.dist-facsom{
	margin: 20px 0 10px 0;
	padding: 0;	
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
}
.facsom-dados{
	font-size: 12px;
	color: #FFF;
	margin: 5px 0 0 0;
	padding: 0;	
}
.facsom-dados a{
	color: #FFF;
	text-decoration: none;	
}
.facsom-dados a:hover{
	text-decoration: underline;	
}
#meio-d{
	margin: 0;
	padding: 0;
	width: 430px;
	height: 100%;
	float: left;	
}
#meio-d h2{
	margin: 90px 0 0 50px;
	padding: 0;
	font-size: 14px;
	width: 335px;
	color: #FFF;	
}
form{
	margin: 15px 0 0 50px;
	padding: 0;
	font-size: 13px;
	color: #FFF;
}
.campo-texto{
	width: 338px;
	height: 34px;
	background: url(../imgs/input.png) no-repeat;
	padding-left: 20px;
	font-size: 11px;
	color: #FFF;
	border: 0;	
	outline: none;
}
textarea{
	width: 339px;
	height: 124px;
	background:url(../imgs/textarea.png) no-repeat;
	border: 0;
	padding: 20px 0 0 20px;
	color: #fff;
	resize: none;
	outline: none;
}
input[type="submit"]{
	width: 73px;
	height: 19px;
	background: url(../imgs/botao-enviar.png) no-repeat;
	border: 0;
	margin-right: 20px;	
	cursor: pointer;	 
   }

[André do Vale 76]

@media screen and (max-height: 600px){
 #main{
   top: 0;   
   margin: 0 auto 0 -457px;
 }
}

[Eduardo Kalsing 0]

Bah André, era exatamente isso! Solucionado o problema! Muito obrigado!