1485 sujets

Web Mobile et responsive web design

Media queries marche pas sur Galaxy tab ..?!

Salut à vous

j'ai tourné un peu avant de venir, mais je ne trouve pas pourquoi mon media queries ne fonctionne pas; je teste sur galaxy tab 10.1

voici mes codes
css ( le tag-reservation doit etre plus gros sur un pc, en font 70 et height 100, avec une couleur blanche)
@media screen and (device-width: 800px) { html { zoom: 81.21827%; } 

	
	.grid {
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	[class*='col-'] {
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}
		.tag-reservation{
				display: block;
				clear: both;
			border-radius: 5px;
			text-align:center;
			color:#a0a0a0;
			padding:5px 10px;
			margin: 40px 0px 40px 10px;
			height:50px;
			background-color:#e4a2df;
			font-size: 50px;
			
			}
			.tag-prix-small{
				display: inline;
			border-radius: 5px;
			text-align:center;
			color:#000000;
			padding:8px;
			margin: 30px 20px;
			height:40px;
			background-color:#e4a2df;
			font-size: 40px;
			}
}


html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../TEST/essai.css"/>
 <meta name="viewport" content="width=device-width">
</head>


Merci de vos eclairages Smiley cligne
Administrateur
Bonjour,

as-tu testé avec un autre périphérique et ça fonctionnait ?
Pourquoi device-width et pas max-width ou min-width ?
c est le seul outil tablette que j'ai ^^ donc je ne sais pas si ça fonctionne ailleurs ( bien que sur le phone ça ne fonctionne pas non plus)
device-width..? bah c'est la largeur max du device...non?
Administrateur
lbc01 a écrit :
device-width..? bah c'est la largeur max du device...non?

Non, "device-width" est la valeur exacte du device. Donc s'il fait 799px, cela ne correspondra pas. Je te conseille également plutôt "max-device-width".

Autre chose, quel est l'intérêt de la règle (propriétaire) suivante : zoom: 81.21827%; ?
Merci de ta réponse, et bravo pour ton bon site , belle réussite ^^

..rien n'y fait , je comprends pas...j'ai changé les intitulés de media ( max/min-device-width) ajouté "portrait", changé les largeurs d'ecrans...ça bouge toujours pas
J'ai même essayé sur d'autres DIV, au cas où...rien !

snif....

Je crois que j'irais plus vite avec une redirection en cas de petits ecran, sur une autre feuille css...adaptée Smiley smile
bonjour @ibc01

tout d'abord, es-tu sûr que ton fichier css appelant tes media-queries est lu ?
Ensuite, je te conseille la lecture de cet article hyper-complet si tu veux comprendre la syntaxe et le fonctionnement des medias-queries :
http://www.alsacreations.com/article/lire/930-css3-media-queries.html

et enfin voici deux liens de media-queries pour divers supports, chez moi ça fonctionne depuis longtemps :
http://stackoverflow.com/questions/14209921/media-query-for-ipad-landscape-applied-to-samsung-galaxy-tab-2-landscape-as

http://nmsdvid.com/snippets/#

Bonne continuation
merci eviouchka, mais tu imagines bien que j'ai tourné avant de poster Smiley cligne

au vu des infos sur mon post, pourquoi les mediaqueries ne seraient elles pas lues, ça m'interesse Smiley cligne
Sujet clos
Aller à