Theme Responsive

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) 
{ 

}