Quelles tailles d'écrans pour du responsive ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 5 Juillet 2015.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 567
    J'aime reçus:
    31
    Bonjour

    Je suis entrain de rendre mon site "responsive", en m'aidant d'un template css de Alsacréations, et j'ai l'intention de mettre des classes suivant les tailles d'écrans.

    Quelles pourraient être les limites, pour ces catégories :

    smartphones, tablettes, portables, desktop ancien, desktop gros écrans.

    Et, sans oublier les montres connectées et autres lunettes. ;)

    Le template donne à peu près ces limites :

    Code:
    /* ---------------------------------- */
    /* ==Responsive very large            */
    /* ---------------------------------- */
    @media (min-width: 1280px) {
    
    }
    
    /* ---------------------------------- */
    /* ==Responsive large                 */
    /* ---------------------------------- */
    @media (min-width: 1025px) and (max-width: 1279px) {
    
    
    }
    
    /* ---------------------------------- */
    /* ==Responsive medium                */
    /* ---------------------------------- */
    @media (min-width: 769px) and (max-width: 1024px) {
    
    
    }
    
    /* ---------------------------------- */
    /* ==Responsive small                 */
    /* ---------------------------------- */
    @media (min-width: 481px) and (max-width: 768px) {
    
    }
    
    /* ---------------------------------- */
    /* ==Responsive tiny                  */
    /* ---------------------------------- */
    @media (max-width: 480px) {
    
    
    }
    

    Le problème, est évidemment que seul compte la taille des écrans, puisque je n'utilise pas Java.

    Ce type de limites semble-t-il acceptable ?

    Merci beaucoup de vos réponses.

    Respectueusement.
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    788
    J'aime reçus:
    0
    en utilisant l'outil de chrome, tu as les résolutions des principaaux smartphones et tablettes, donc tu peux vérifier la pertinence des chiffres.
     
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 567
    J'aime reçus:
    31

    Bonjour Monsieur

    Quel outil de Chrome ?

    J'avais effectivement un tel outil il y a environ 6 mois, mais je ne sais plus comment cet outil est utilisé.

    Respectueusement.
     
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 567
    J'aime reçus:
    31
    Bonjour Monsieur

    J'ai trouvé sur Alsacréations.

    <F12> puis <Echap>.

    Je vous prie de m'excuser pour ma question stupide.

    Respectueusement.
     
  5. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 567
    J'aime reçus:
    31
    Bonjour loubet

    Voilà ce que çà donne :

    Code:
    ------------------------------------------------
            Type clients    |   jusqu'à  L
    ------------------------|-----------------------
            Smartphones     |      420
    ------------------------------------------------
            Tablettes       |      970
    ------------------------------------------------
       Mobiles et Tablettes |     1024
    ------------------------------------------------
       Mobiles et Desktop   |     1280
    ------------------------------------------------
        Laptop et Desktop   |       +
    ------------------------------------------------
    
    
    ------------------------------------------------
            Type clients    |       LxH
    ------------------------|-----------------------
      Samsung Galaxy S4     |     360x640
    ------------------------|-----------------------
      Samsung Galaxy SIII   |     360x640
    ------------------------|-----------------------
      Samsung Note 3        |     360x640
    ------------------------|-----------------------
           Nokia N9         |     360x640
    ------------------------|-----------------------
      Nokia Lumia 520       |     320x533
    ------------------------|-----------------------
      Laptop with touch     |    1280x650
    ------------------------|-----------------------
    Laptop with MDPI screen |    1280x650
    ------------------------|-----------------------
    Laptop with HDPI screen |    1440x900
    ------------------------|-----------------------
      LG Optimus L70        |     384x640
    ------------------------|-----------------------
      Google Nexus 7        |     960x600
    ------------------------|-----------------------
      Google Nexus 5        |     360x640
    ------------------------|-----------------------
      Google Nexus 4        |     384x640
    ------------------------|-----------------------
      Google Nexus 10       |    1280x800
    ------------------------|-----------------------
      BlackBerry Z30        |     360x640
    ------------------------|-----------------------
      BlackBerry PlayBook   |    1024x600
    ------------------------|-----------------------
      Apple IPhone 6 Plus   |     414x736
    ------------------------|-----------------------
      Apple IPhone 6        |     375x667
    ------------------------|-----------------------
      Apple IPhone 5        |     320x568
    ------------------------|-----------------------
      Apple IPhone 4        |     320x480
    ------------------------|-----------------------
      Apple IPad Mini       |    1024x768
    ------------------------|-----------------------
      Apple IPad            |    1024x768
    ------------------------|-----------------------
     Amazon Kindle Fire HDX |    2560x768
    ------------------------------------------------
    

    Respectueusement.
     
  6. ybet
    ybet WRInaute accro
    Inscrit:
    22 Novembre 2003
    Messages:
    7 419
    J'aime reçus:
    1
    420... et 240 pour les plus petits (attention 240 X 310).
     
  7. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 567
    J'aime reçus:
    31

    Bonjour ybet ;)

    Alsacréations donnait comme limite : 480.

    Merci beaucoup de ta réponse.

    Voici le résultat des limites :

    Code:
     *  --  240  --  480  --  970  --  1024  --  1280  --  *
    

    Très amicalement et respectueusement.
     
Chargement...
Similar Threads - tailles écrans responsive Forum Date
Avoir le générateur de mots clés détaillés AdWords 4 Octobre 2016
Tailles des titres Référencement Google 9 Juillet 2014
Guide de tailles, liens dans description catégorie ou produit ? e-commerce 25 Juin 2014
AdWords : extensions d'annonces grandes tailles AdWords 20 Février 2012
L'algo de Google dévoilé: 300 critères détaillés Crawl et indexation Google, sitemaps 20 Juin 2011
Neutralité du Net, une proposition Verizon-Google évoque des entailles Google : l'entreprise, les sites web, les services 11 Août 2010
temps_passe d'un utilisateur (constat+détailles) Développement d'un site Web ou d'une appli mobile 7 Mai 2007
Résultat multiples et détaillés sur requête google Référencement Google 17 Août 2006
xiti statistiques detaillés non dispo aujourdhui Administration d'un site Web 23 Février 2005
IE6 et les tailles Administration d'un site Web 17 Janvier 2004
Google rachète Redux (écrans haut-parleurs) Google : l'entreprise, les sites web, les services 13 Janvier 2018
PhantomJS : capture d'écrans sont noires Développement d'un site Web ou d'une appli mobile 21 Mars 2017
Fil d'ariane à ne pas afficher pour petits écrans ? Demandes d'avis et de conseils sur vos sites 29 Octobre 2013
Affichage différent sur 2 écrans IE7 ... Demandes d'avis et de conseils sur vos sites 16 Septembre 2010
Personnaliser ses captures d'écrans pour les rendres plus jolies Développement d'un site Web ou d'une appli mobile 21 Juillet 2009
Droit et captures d'écrans TV Droit du web (juridique, fiscalité...) 3 Février 2009
Résolutions d'écrans et visiteurs. Référencement Google 9 Juillet 2008
Avec IE : une erreur quand j'ouvre mes pages fonds d'écrans Développement d'un site Web ou d'une appli mobile 4 Octobre 2007
Illustrer les mauvaises pratiques : captures écrans Débuter en référencement 3 Octobre 2006
l1l.info : google avec des copie d'écrans miniatures Google : l'entreprise, les sites web, les services 19 Avril 2004