css - Media Query to target tablets and mobiles -

css - Media Query to target tablets and mobiles -

we developing web application. main scope target different tablets resolution , browsers. few android 5, 7 , 10 inch , iphone 5, 7 , 10 inch. using jquery mobile , mvc target different browser, target different resolution found media query helpful adjust font size,div width etc..

what media query width should specify?

@media screen , (min-width: 768px) { }

the min-width , max width target android 5, 7 , 10 inch , iphone 5,7,10 ?

i saw different stack overflow question not satisfied reply given.

this guide css tricks - hope helps

/* smartphones (portrait , landscape) ----------- / @media screen , (min-device-width : 320px) , (max-device-width : 480px) { / styles */ }

/* smartphones (landscape) ----------- */ @media screen , (min-width : 321px) { /* styles */ } /* smartphones (portrait) ----------- */ @media screen , (max-width : 320px) { /* styles */ } /* ipads (portrait , landscape) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) { /* styles */ } /* ipads (landscape) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) { /* styles */ } /* ipads (portrait) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) { /* styles */ } /* desktops , laptops ----------- */ @media screen , (min-width : 1224px) { /* styles */ } /* big screens ----------- */ @media screen , (min-width : 1824px) { /* styles */ } /* iphone 4 ----------- */ @media screen , (-webkit-min-device-pixel-ratio : 1.5), screen , (min-device-pixel-ratio : 1.5) { /* styles */ }

css html5 css3 asp.net-mvc-4 jquery-mobile