CSS Media Sorguları

iPad Media Sorguları ( Tüm Nesiller – iPad Mini Dahil)

iPad Dikey ve Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px){
     background:red;
}

iPad Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape){}

iPad Dikey Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){}

iPad 3 ve 4 Media Sorguları

Yalnızca 3. ve 4. nesil retina ipad’ler için geçerlidir.

Retina iPad Dikey ve Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){}

Retina iPad Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){}

Retina iPad Dikey Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){}

iPad 1 ve 2 Media Sorguları

iPad 1 ve 2 Dikey ve Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){}

iPad 1 ve 2 Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1){}

iPad 1 ve 2 Dikey Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1){}

iPad Mini Media Sorguları

iPad Mini Dikey ve Yatay Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)

iPad Mini Yatay Media  Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1){}

iPad Mini Dikey Media Sorgusu

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){}

iPhone Media Sorguları

iPhone 6 Media Sorguları

iPhone 6 Dikey ve Yatay Media Sorguları

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px){}

iPhone 6  Yatay Media Sorguları

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape){}

iPhone 6  Dikey Media Sorguları

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait){}

iPhone 6 Plus Media Sorguları

iPhone 6 Plus Dikey ve Yatay Media Sorguları

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px){}

iPhone 6 Plus  Yatay Media  Sorguları

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape){}

iPhone 6 Plus  Dikey Media Sorguları

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait){}

iPhone 5 ve 5S Media Sorguları

iPhone 5 ve 5S Dikey ve Yatay Media Sorguları

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px){}

iPhone 5 ve 5S Yatay Media Sorguları

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape){}

iPhone 5 ve 5S Dikey Media Sorguları

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait){}

iPhone 2G,3G,4,4S Media Sorguları

iPhone 2G-4S Dikey ve Yatay Media Sorguları

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px){}

iPhone 2G-4S Yatay Media Sorguları

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape){}

iPhone 2G-4S Dikey Media  Sorguları

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait){}