How to detect ONLY with CSS mobile screens

All touch screen and mobile devices (including tablets, smartphones) can be detected with css with the following @media rule.

@media only screen and (hover: none) and (pointer: coarse){

/* Regular CSS rules here*/

}

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
    /* Styles */
}
    
@media only screen and (max-device-width: 768px) {
    /* Styles */
}

Earlier post: How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Related