Quelle est la résolution d'un site web mobile être optimisé?

Je vais avoir de la difficulté à comprendre comment le mobile résolution fonctionne. De ce que je sais, de sites web, le mobile, la résolution est de 320px de largeur. Le problème semble être à l'iPhone 4, qui semble avoir de 640px de largeur de la résolution de l'écran, mais pourtant, il affiche web en 320px.

Qu'est-ce que la solution ici? Dois-je code 2 résolutions différentes pour 320px et 640px écrans? Comment puis-je la force de l'iPhone 4 pour afficher 640px web?

Vous pouvez utiliser différentes feuilles de style en utilisant les media queries wit min/max-width. Ne sais pas au sujet de forcer une résolution sur l'Iphone. - Peut-être que jQuery Mobile est un endroit à regarder ce qu'ils ont fait?

OriginalL'auteur Richard Rodriguez | 2012-02-19

  1. 5

    Eh bien en fait, comme vous l'avez remarqué, iPhone 4+, la résolution est de 640px, mais le navigateur n'affiche 320px, pour un certain nombre de raisons différentes. Cochez cette autre réponse, pour plus de détails sur la façon dont cela se passe:320px de résolution pour les applications web

    Qui parle aussi le fait que vous pouvez spécifier la fenêtre d'affichage pour un site web afin de le forcer à être vu en 640px sur un iphone, mais que vous ne devriez pas faire cela, mais juste le double de la résolution sur l'image que vous utilisez.

    OriginalL'auteur Cosmin Atanasiu

  2. 5

    J'ai trouvé des sites internet avec une largeur minimale de 320px aura l'air bien sur la plupart des haut de gamme des appareils mobiles comme l'iPhone, Android et Nokia N97.Certaines des résolutions d'écran de la plupart des appareils populaires:

    "iPhone 320 x 480"

    "iPhone 4 320 x 480 (mise à l'échelle par un facteur de 2)"

    "HTC Legend 320 x 480"

    Bienvenue à Débordement de Pile! Merci pour ton post! S'il vous plaît ne pas utiliser les signatures/slogans dans vos messages. Votre zone utilisateur compte comme votre signature, et vous pouvez utiliser votre profil pour afficher des informations à propos de vous-même vous le souhaitez. FAQ sur les signatures/slogan>

    OriginalL'auteur paul thomas

  3. 1

    Soit vous pouvez utiliser une mise en page adaptative, comme utilisé sur cette site web (essayez de réduire la largeur de la fenêtre de votre navigateur pour voir le site de l'adapter). Cette conception est également abordés dans ce post de blog.

    Ou vous créez des mises en page pour les différentes résolutions, tous ensemble, à l'aide de les media queries.

    Je n'ai pas demandé comment le faire, j'ai demandé pourquoi l'iPhone 4, qui a 640px écran ne peut pas afficher site plus grand que 320px.
    En raison de quelque chose que le marketing appelle "retina display"
    Btw, vous ne vous demandez pas pourquoi l'iPhone 4 a un de 640 px écran, mais la façon de le gérer. Vous avez obtenu vos réponses...
    Eh bien, vous a demandé: "Quelle est la solution?". Une solution générale est un design qui s'adapte à la résolution du navigateur, peu importe l'appareil. Donc je ne comprends vraiment pas le bas de vote.

    OriginalL'auteur Christofer Eliasson

  4. 1

    Car le nombre de pixels a doublé depuis l'iPhone 3 pour iPhone 4, il aurait fallu que chaque site web optimisé pour l'iPhone 3 serait donc ... minuscule sur l'écran.
    Par conséquent, une devicePixelRatio a été introduit, afin de conserver la taille des sites web (en mm ou en pouces) tout en doublant la physique pixels, efficacement faire le double de la résolution (retina) images et de polices de caractères beaucoup plus nette, mais en conservant les vieux CSS de polices et de tailles de pixel.

    La devicePixelRatio est de 2:1 sur iPhone 4 et 5.
    Cela signifie qu'une image définie dans le css avec 100100px la réalité de la place de 200x200 physique pixels. Donc, vous pouvez toujours css-style de la page avec 320px de largeur totale; 320 dips appareil indépendant de pixels.

    Noter que le devicePixelRatio existe aussi sur Android, où elle varie de 1,5 à 3.

    Plus d'informations:
    http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html et
    http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

    OriginalL'auteur Ben

  5. 0
    <link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">

    De cette façon CSS vous permettra de charger séparément pour le paysage et le protrait.

    @media (min-width: 500px) and (max-width: 640px){}
@media (min-width: 320px) and (max-width: 400px){}

    C'est la façon dont la résolution va être traités.

    OriginalL'auteur equerambug

  6. 0

    Mobiles les plus courants les tailles d'écran sont 320x240, 480x320, 800x480, 960x480, 1024x800, et 1024x768.

    Cette réponse n'est pas pertinent

    OriginalL'auteur Thilanka De Silva

  7. -1

    vous utilisez cette ligne de code:

    <link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />

    Lorsqu'il détecte votre écran à moins de 480px dans la largeur, il va utiliser le css. Si non, il va utiliser la normale css que vous avez utilisé avant d'

    et, dans ce mobile.css vous pouvez définir des règles css pour le portrait et orientation paysage. avec cette: @media screen and (orientation:portrait) { CSS ICI }
    ou pour le paysage de @media screen and (orientation paysage) { CSS ICI }
    btw 480px est la largeur de l'iphone4 écran. Je n'ai aucune idée de l'endroit où vous avez obtenu 320px ou 640px
    De wikipedia: 640×960 résolution de 326 ppi (0.61 mégapixels): en.wikipedia.org/wiki/Iphone_4
    néanmoins, vous pouvez modifier le 480px à 640px. De cette façon, il va appeler le css quand il détecte la 640px de largeur d'écran

    OriginalL'auteur Andrew Ng