Je crée une feuille de style compatible avec les appareils mobiles pour une de mes pages. Existe-t-il un moyen simple de montrer cette feuille de style aux utilisateurs d'iPhone/Android? Ou dois-je extraire les agents utilisateurs et le comprendre de cette façon - et comment le faire?
Aussi - des outils pour rendre ce type de développement web plus facile?
Vous pouvez faire quelque chose comme ceci, si votre feuille de style est la même pour iOS/Android.
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />
Mais si vous essayez de détecter s'il s'agit du système d'exploitation iOS OR Android, vous devez le faire.
Pour faciliter le développement mobile, il y a une tonne de choses:
Il y en a quelques-uns pour vous aider à démarrer :)
J'espère que cela t'aides.
Essayez ceci en utilisant navigator.userAgent en JavaScript;) (avec la permission de cet article génial http://css-tricks.com/snippets/javascript/redirect-mobile-devices/ ):
if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
alert("we've got an iDevice, Scotty");
}
if (navigator.userAgent.match(/Android/)) {
alert("Droid me baby");
}
S'il vous plaît vérifier ce post http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-Android/
détecter ce qui utilise exactement l'utilisateur et le style de son appareil mobile
iphone 4
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
.inphone4CSS{}
}
traget cible Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5){
.GalaxyS2_CSS{}
}
plus à ce sujet (ou un autre appareil), vous pouvez trouver ici: Ciblez un appareil spécifique