Navegador para iPad WIDTH & HEIGHT standard


125

Alguém sabe a largura e a altura mais seguras para o BODY ao visualizar qualquer página da Web no iPad? Eu quero evitar as barras de rolagem o máximo possível.

Obrigado.

Erik


1
Aqui está um link para um dos simuladores de navegador baseado que você pode usar para testar o modo paisagem de iPad http://alexw.me/ipad2/#!safari
Venkat - Open IT

Respostas:


277

A largura e a altura dos pixels da sua página dependerão da orientação e da tag da meta viewport, se especificada. Aqui estão os resultados da execução de $ (window) .width () e $ (window) .height () do jquery no navegador iPad 1.

Quando a página não possui uma tag meta viewport:

  • Retrato: 980x1208
  • Paisagem: 980x661

Quando a página possui uma dessas duas metatags:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

  • Retrato: 768x946
  • Paisagem: 1024x690

Com <meta name="viewport" content="width=device-width">:

  • Retrato: 768x946
  • Paisagem: 768x518

Com <meta name="viewport" content="height=device-height">:

  • Retrato: 980x1024
  • Paisagem: 980x1024

Com <meta name="viewport" content="height=device-height,width=device-width">:

  • Retrato: 768x1024
  • Paisagem: 768x1024

Com <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

  • Retrato: 768x1024
  • Paisagem: 1024x1024

Com <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

  • Retrato: 831x1024
  • Paisagem: 1520x1024

São estes para o ipad 2 executando o ios 5.x? o ipad 1 executando o ios 4.x não possui uma barra de guias abaixo da barra de endereço.
precisa saber é o seguinte

Ericson578: Estes são todos para ipad 1.
Paul Rademacher

2
1024x1024 é esse erro de digitação?
Ciantic #

@ Ciantic Não é um erro de digitação, eu tenho medo.
kim3er

13

Não há uma resposta simples para esta pergunta. A versão móvel da Web do WebKit, usada em iPhones, iPod Touches e iPads, redimensionará a página para caber na tela, quando o usuário poderá aumentar e diminuir o zoom livremente.

Dito isto, você pode criar sua página para minimizar a quantidade de zoom necessária. Sua melhor aposta é tornar a largura e a altura iguais à resolução mais baixa do iPad, pois você não sabe para que lado ele está orientado; em outras palavras, você criaria sua página 768x768, para que ela caiba bem na tela do iPad, seja ela orientada para 1024x768 ou 768x1024.

Mais importante, você deseja projetar sua página com grandes controles, com muito espaço fácil de acertar com os polegares - você pode projetar facilmente uma página de 768x768 muito confusa e, portanto, exigindo muito zoom. Para fazer isso, é provável que você queira dividir seus controles entre várias páginas da web.

Por outro lado, não é a busca mais interessante. Se ao projetar você encontrar oportunidades de tornar sua página mais "amigável", então vá em frente ... mas a realidade é que os usuários do iPad estão muito confortáveis ​​em se movimentar e aproximar e afastar o zoom da página para acessar as coisas, porque é necessário na maioria dos sites. Se desejar, você provavelmente deseja projetá-lo para que seja propício a esse tipo de navegação.

Faça caixas com dados agrupados relevantes que possam ser facilmente tocados duas vezes para manter o foco e mantenha os controles relacionados próximos um do outro. Os usuários do iPad provavelmente apreciarão uma página que facilita a navegação familiar de zoom e pan que estão acostumados a mais do que uma página que possui menos controles para que não precise.


Agradeço muito pela resposta. Concordo. Ainda não posso comprar um iPad. Tenho a impressão de que a maioria das pessoas vê páginas da Web em orientação retrato, em vez de paisagem. Eu sei que sim. E obrigado pelo lembrete do Finger Friendly. Muito verdadeiro! Obrigado. Erik
Erik

4
768x1024 não leva em conta o tamanho do urlbar e abas, e é diferente dependendo do ipad (1 ou 2, e entre ios 4 & 5)
Ericson578

0

Você pode tentar isso:

    /*iPad landscape oriented styles */

    @media only screen and (device-width:768px)and (orientation:landscape){
        .yourstyle{

        }

    }

    /*iPad Portrait oriented styles */

    @media only screen and (device-width:768px)and (orientation:portrait){
        .yourstyle{

        }
    }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.