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:
Voili-voilou, si vous pouviez m'aider je partirai sur de bonnes bases.
Merci d'avance.
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:
<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.
