Media query to target iphone/mobile/ipad

Question

I am using media query to target iphone/ipad/mobile.

I have written the following media query.

But my problem is if i write css in media query of mobile \'max-d

Answer 1

I took the answer from http://cssmediaqueries.com/target/

//HTC One, Samsung Galaxy S5, OnePlus One
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

//Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5)

//Samsung Galaxy S3
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)  

//Samsung Galaxy S4
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)  

//LG Nexus 4
@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)

//LG Nexus 5, Huawei Ascend P7
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3)

//Asus Nexus 7
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)  

//iPad 1, iPad 2, iPad Mini
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1)

//iPad 3, iPad 4
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) 

//iPhone 3G
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)  

//iPhone 4
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)  

//iPhone 5

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)  

//iPhone 6
@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)  

//iPhone 6 Plus
@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)  

//Huawei Ascend P6
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)