web-dev-qa-db-fra.com

CSS exclusif pour iPhone/Android

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?

iphoneandroidhtmlcssmobile
16
AKor

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.

18
TNC

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");
}
4
Kevin Pajak

S'il vous plaît vérifier ce post http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-Android/

2
AlexKorovyansky

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

0
Arthur