[Resolvido] @media screen

[Dodo15 0]

Boa noite

Estou com um problema em um css simples de uma página de construção, esta funcionando normalmente no computador, mas quando abro no iphone a página não abre 100%, o site fica pequeno no canto esquerdo e tenho que ampliar... O que tenho que fazer no código para a página ficar ampliada totalmente no iphone?

 

Código css:

* { margin: 0 auto; padding: 0; border: 0; font-family: "Arial", Verdana, sans-serif }
body { background: #000E28; }

#content{ width:600px; height: 550px; position: absolute; top:50%; left: 50%; margin: -302px 0 0 -302px; background: url(images/background.jpg) no-repeat #000E28; }
#info { width: 600px; height: auto; text-align: center; padding: 100px 0 0 0; }
#info h1 { padding: 30px 0 0 0; font-size: 23px; color:#FFF; text-shadow: 2px 2px #000; }

img { width: 300px; height: 165px; margin: 20px 0 0 0; }

#mais { width: 600px; height: auto; margin:10px 0 0 0; }
#mais p { text-align: center; color:#FFF; font-size:13px; padding:3px 0; }

@media only screen and (max-device-width: 450px) {
* { width: 100%; max-width: 450px; }
body{ width: 100%; max-width: 450px; background: url(images/bg_phone.jpg) repeat-x #000E28; -webkit-text-size-adjust:none; direction: rtl; }
#content { width: auto; max-width: 450px; background: none; position: absolute; top:0; left:0; margin: 0; display:block; }
#info, #mais { width: auto; height: 300px; margin:0; padding:0; left:0; top:0; display:block; }
img { width: 100%; height:100%; max-width: 300px; max-height: 165px; }
#mais { height: auto; }
}

 

 

Obrigado pela atenção.

[Sérgio Haubman 2]

Boa noite,

 

Para você resolver esse problema, você deve colocar uma metatag no head do site para que o iphone renderize na escala correta.

 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

 

Espero ter ajudado.

 

Abs.

 

Sérgio Martins

[André do Vale 76]

O problema talvez sejam esses os max-widths declarados em PX (450 e 300). Dependendo do iPhone em questão, isso corresponde a menos da metade da tela em landscape. :thumbsup:

 

-- Edit:

 

@media only screen and (max-device-width: 450px)

 

Isso só vai pegar no iPhone 3GS ou menor em posição portrait.

[Dodo15 0]

Muito obrigado, funcionou..

Pelo jeito só faltava colocar essa meta no HTML :D