Messages: 235

Enregistré le: 10 Jan 2005

Message le Mer Juil 05, 2017 11:17

Bonjour,

Etant plus que débutant je bloque dans la compatibilité entre ces deux supports.

Sur ordis pas de problèmes.

Sur mobiles voici ce que ça donne avec firefox et avec chrome sous android:

ttp://location-madere.fr/ficier-pour-captures.html

Donc sous firefox ça marche bien mais avec chrome sur mobiles ça marche pas...

Et voici mon fichier css que j'ai récupéré sur internet:


Code: Tout sélectionner
<style>
<!--   
@media (max-width: 640px) {
   * {
      box-sizing: border-box;
   }
   
   /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

   body {
      width: auto;
      margin: 0;
      padding: 0;
   }
   
   /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

   img,
   table,
   td,
   blockquote,
   code,
   pre,
   textarea,
   input,
   iframe,
   object,
   embed,
   video {
      max-width: 100%;
   }
   
   /* conserver le ratio des images */

   img {
      height: auto;
   }
   
   /* gestion des mots longs */

   textarea,
   table,
   td,
   th,
   code,
   pre,
   samp {
      -webkit-hyphens: auto; /* césure propre */
      -moz-hyphens: auto;
      hyphens: auto;
      word-wrap: break-word; /* passage à la ligne forcé */
   }
   
   code,
   pre,
   samp {
      white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
   }
   
   /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

   .element1,
   .element2 {
      float: none;
      width: auto;
   }
   
   /* masquer les éléments superflus */

   .hide_mobile {
      display: none !important;
   }
   
   /* Un message personnalisé */

   body:before {
      content: "";
      display: block;
      text-align: center;
      font-style: italic;
      color: #777;
   }
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}
-->
</style>



Voili-voilou, si vous pouviez m'aider je partirai sur de bonnes bases.

Merci d'avance.
Haut
1 Réponse
Messages: 37923

Enregistré le: 7 Juil 2004

Message le Jeu Juil 06, 2017 20:37

Bonjour,

Vous devriez faire aussi des tests avec l'outil de Chrome :
developers.google.com/web/tools/chrome-devtools/device-mode/ .

Le forum : Développement d'un site Web ou d'une appli mobile, est :
http://forum.webrankinfo.com/developpement-web.html .

Temps de réponse : 2 minutes.
Cordialement.
Haut