Voici une petit listes des différents médias queries à utiliser selon le smartphone pour y adapter au mieux votre site.
Mobiles
iPhone
/*Landscape Mode*/ @media screen and (max-device-width: 480px) { } /* Portrait Mode */ @media screen and (max-device-width: 320px) { }
iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
HTC Evo/ BlackBerry Torch/ HTC Thunderbolt/ HD2
@media screen and (max-device-width: 480px) { }
Pour tablettes
iPad 1-2-3
/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
Samsung Galaxy Tab 10.1/ Sony Tablet S/ Motorola Xoom/ Lenovo Thinkpad Tablet
/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
HTC Flyer/ BlackBerry PlayBook
/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 600px) and (orientation: portrait) { }
HP TouchPad
/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
T-Mobile G-Slate
/* Landscape Mode */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 768px) and (orientation: portrait) { }
ViewSonic ViewPad 10
/* Landscape Mode */ @media (max-device-width: 1024px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 600px) and (orientation: portrait) { }
Dell Streak 7
/* Landscape Mode */ @media (max-device-width: 800px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 480px) and (orientation: portrait) { }
ASUS Eee Pad Transformer
/* Landscape Mode */ @media (max-device-width: 1080px) and (orientation: landscape) { } /* Portrait Mode */ @media (max-device-width: 800px) and (orientation: portrait) { }
Laisser un commentaire