Já fiz um post explicando como via JavaScript pegar essa mudança e colocar uma classe no body da página, além de ter um melhor resultado em performance ainda permite que seja testado no PC, mas se mesmo assim você ainda quer usar o recurso de @media do CSS, vamos lá, ele pode ser feito de algumas formas:
No HTML na tag Link
<link media="only screen and (max-device-width: 768px)" href="portrait.css" type="text/css" rel="stylesheet" /> <link media="only screen and (max-device-width: 1024px)" href="landscape.css" type="text/css" rel="stylesheet" />
No CSS no seletor @Media
@media only screen and (max-device-width: 768px) and (orientation:portrait) {
// Seletores para Landscape (Paisagem)
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
// Seletores para Portrait (Retrato)
}
Ficou na Dúvida? Precisa de Ajuda? Comenta ai que eu sempre respondo!
Fala Tilo, beleza?
Cara, eu acabei de fazer uma versão de um site pra iPhone e o cliente reclamou que no iPad fica muito pequeno. Tem alguma forma de eu fazer algo que atenda bem aos dois dispositivos? Tenho que deixar a largura e altura sempre relativos? Qual a sua sugestão?
Ótimo post, tem uns outros tb que irão me ajudar nessa migração.
Abraço!
Olá Leandro,
Provavelmente vc esqueçeu de deixar a largura baseada no dispositivo,
a forma correta de usar o viewport é e não como já vi algumas pessoas fazendo
segue a documentação de como organizar seu conteudo para ipad:
http://developer.apple.com/library/safari/#technotes/tn2010/tn2262/index.html
boa sorte