Compatibilité mobiles - ordis de bureaux

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par numaa, 5 Juillet 2017.

  1. numaa
    numaa WRInaute discret
    Inscrit:
    10 Janvier 2005
    Messages:
    172
    J'aime reçus:
    0
    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:
    <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.
     
  2. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    31 738
    J'aime reçus:
    336
Chargement...
Similar Threads - Compatibilité mobiles ordis Forum Date
Compatibilité Thunderbird 78.8.1 et charset 7 bits. Le café de WebRankInfo 5 Avril 2021
Formulaire html5 : compatibilité navigateurs Développement d'un site Web ou d'une appli mobile 1 Mars 2020
Compatibilité Javascript pour IE. Demandes d'avis et de conseils sur vos sites 21 Avril 2019
Optimisations SEO avant migration et compatibilité mobile ? Débuter en référencement 16 Avril 2018
placeholder dans formulaire et compatibilité Développement d'un site Web ou d'une appli mobile 17 Octobre 2016
Test de compatibilité mobile + PageSpeed [outil officiel Google] Google : l'entreprise, les sites web, les services 6 Juin 2016
Ce site utilise des cookies et compatibilité mobile Demandes d'avis et de conseils sur vos sites 12 Mai 2015
Algorithme de compatibilité mobile Débuter en référencement 27 Avril 2015
Avis sur compatibilite mobile et le référencement Problèmes de référencement spécifiques à vos sites 15 Avril 2015
CSS et compatibilité IE Développement d'un site Web ou d'une appli mobile 10 Avril 2015
Outil de test compatibilité mobile Débuter en référencement 26 Novembre 2014
probleme compatibilite site sur ipad et iphone Développement d'un site Web ou d'une appli mobile 6 Avril 2014
Compatibilité des rich snippets avec la validation W3C Débuter en référencement 25 Avril 2013
Incompatibilité Mail HTML/messageries Développement d'un site Web ou d'une appli mobile 4 Avril 2013
compatibilité entre différents dreamweaver Développement d'un site Web ou d'une appli mobile 27 Octobre 2012
Compatibilité CSS avec IE, FF, Safari, ... Développement d'un site Web ou d'une appli mobile 19 Août 2011
<script> Whois et images/slider incompatibilité? Développement d'un site Web ou d'une appli mobile 19 Juillet 2011
Probleme de compatibilité IE / Firefox Développement d'un site Web ou d'une appli mobile 18 Janvier 2011
Soucis de compatibilité navigateur et résolution d'écran Développement d'un site Web ou d'une appli mobile 17 Décembre 2010
HTML5 & CSS3 readiness / Tableau de compatibilité HTML5 & CSS3 Le café de WebRankInfo 19 Avril 2010