Navegador para iPad WIDTH & HEIGHT standard

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

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

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.

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{

        }
    }