Comment utiliser les media Queries pour les appareils android avec la version android 2.2.1 et 2.3.5 et leur taille de l'écran de 240 * 320 et taille d'écran de 480 * 800?

J'ai dû utiliser une image qui était de taille 304 * 250.

Il fonctionne parfaitement à la taille de l'écran de 320 * 480 et la taille de l'écran de 720 * 1280.

Maintenant, Quand j'ai voulu vérifier la taille de l'écran de 240 * 320 et taille d'écran de 480 * 800? Ni les images de fond sont à voir, ni de la valeur des données.

Correctives étape:

J'ai pensé à utiliser une zone d'ombre au lieu de l'image. J'ai mis en place et testé dans la taille de l'écran de 320 * 480.Il a été parfait.

J'ai pensé à tester le même dans la taille de l'écran de 240 * 320 et taille d'écran de 480 * 800 à l'aide de Media Query

J'ai fait référence à partir de ici et j'ai essayé de la mettre en œuvre, Mais je n'ai pas été couronnée de succès.

Mon css

.container
{
    width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px;
}

Ma Requête de Média CSS

@media only screen and (max-device-width: 240px) 
{
    .container
    {
       width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
    }
}

J'ai appelé le CSS de la façon suivante

<link rel="stylesheet" type="text/css" href="css/common_set.css" />

Problème:
Il n'a pas à être mis en œuvre.Je ne vois pas la case.C'était juste un écran vide.

Il n'a pas d'accéder à la requête de média css de celui mentionné ci-dessus.

SOLUTIONS ESSAYÉ

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Est-il une erreur dans mon application? S'il vous plaît aider!!

Pour clarifier,si j'ai bien compris le 1er point de la réponse

    .name_layer
    {
         float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px;
    }
    .name_layer_text
    {
        margin-left:1%;
    }
    .swipe_body
    {
          padding:0; margin:0; width:100%; height:480px; 
    }
    .container
    {
             width:200px; height:10px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
    }
    @media only screen and (max-width: 240px) 
    {
      .container
      {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
      }
    }

Est-ce correct? mais ma sortie se fait selon le conteneur CSS... et je suis de la tester sur un appareil d'un navigateur

edit:2

    @media only screen and (max-width:240px)  
    {
      .container
      {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px;
      }
    }       
    @media only screen and (min-width:240px)
    {
         .container
        {
                 width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px;
        }
    }

C'est un petit appareil et prend la 2ème CSS- min-width: 240px

OriginalL'auteur user | 2013-06-14

  1. 2

    Ce sont quelques possibilités pour laquelle votre requête des médias n'est pas de travail.

    1. Lorsque vous avez utilisé des requêtes de média CSS, avez-vous supprimer votre normal CSS? Ou avez-vous garder à la fois? Si vous voulez avoir les deux, alors vous avez besoin pour maintenir de façon appropriée d'autre de la normale CSS s'écraser les unes dans les media query.

      Par exemple, si votre css est comme ça ...

      @media only screen and (max-width: 241px) 
{
    .container
    {
         width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
    }
}

.container
{
     width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
}

      La .container style qui est à l'extérieur de la media query remplacer l'un à l'intérieur de la requête de média.Donc, si il ya des styles qui sont spécifiques à la résolution de l'appareil, puis vous devez envelopper à l'intérieur de la requête de média.

      Styles qui ne sont pas liés à la résolution de l'appareil comme par exemple la couleur de la rubrique qui est la même dans toutes les résolutions doivent être à l'extérieur de la requête de média.

    2. Un problème possible peut être des requêtes de média n'est pas en adéquation avec la résolution de l'appareil.

    3. Aussi s'il vous plaît vérifier l'orientation qui vous essayez d'afficher.

    4. Si vous sont à l'essai sur navigateur, vous verrez les styles à l'intérieur des médias requête que lorsque vous réduisez la largeur du navigateur pour satisfaire la requête de média. Très important! Parce qu'en utilisant des requêtes de média que vous dites de navigateur qui s'appliquent seulement lorsque la largeur est-ce beaucoup. Par exemple, de voir les changements à l'intérieur des médias requête de max-width 241px vous avez besoin pour réduire la largeur de votre navigateur pour moins de 240px (juste de réduire la largeur de navigateur très peu)

    Vous pouvez essayer de médias suivants requête pour un appareil de résolution de 240*320.

    Je crois que j'ai trouvé la solution à votre problème, vous devez supprimer dispositif de requête de média (essai sur navigateur?)

    @media only screen and (max-width: 241px) 
{
  .container
  {
   width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
  }
}

    Vous pouvez essayer de médias suivants requête pour un appareil de résolution de 480*800

    @media only screen 
and (min-width : 480px) 
{
/* Styles */
}

    Remarque: soyez très prudent avec les media queries. lorsque vous définissez min et max, ils appliquent pour toutes les résolutions qui remplissent les min et max.Pour l'exemple ci-dessus media query s'appliquent pour tous les appareils dont la largeur est supérieure à 480.

    Yugandhar Pathi, Merci,cette réponse m'a donné plus de perspicacité sur les media queries. Pouvez-vous nous expliquer le 1er point. comment dois-je avoir mon CSS et des requêtes de média CSS?
    l'utilisateur, j'ai ajouté une explication dans la réponse elle-même.
    vous avez raison...pourquoi je vous demande était Encore il n'est pas mis en œuvre .Donc, j'ai pensé que si j'ai mal compris votre 1er point. J'espère que j'ai bien compris ce que vous avez dit..s'il vous plaît vérifier la version éditée de la question.
    Enveloppez l'autre .conteneur comme ça @media screen and (min-width: 240px) { .conteneur{... } } Ensuite, cela s'applique à des dispositifs qui ont une largeur supérieure à 240px.
    C'est becuause votre appareil largeur est correspondant à la fois et donc qui est toujours présent dans la 2ème css sur écrit à la première. Pour se débarrasser de ce changement, la mediaquery avec min à 241px.

    OriginalL'auteur Yugandhar Pathi