Geek asks and answers

What is the best way to detect small devices like mobile phones or tablets in CSS?

When I read a responsive design, people always use a seam to use this statement: @media and (max-width :)

But do mobile phones today seem to have excellent resolution (often larger than PCs), the best way to detect small devices?

thank; =)

+3
source share
4 answers

Screen resolution does not matter. The value used in media queries is the width of the device . For instance:

1280x720 . ( ) 720 , HD, 200%, 360 . , :

/* Even though my phone has a screen width of 720px… */

@media screen and (max-width: 360px) {
     /* 
      * This code will apply 
      */
}

@media screen and (min-width: 361px) {
     /* 
      * This code will not apply
      */
}

, , 400 , , .

+2

.

DPI Height Width.

@media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
   // Iphone 5s
}

:

+1

CSS /HD.

viewport . .. <meta name="viewport" content="width=device-width"> - CSS, 100%.

Viewport Device-Widths .

+1

, "" , "" CSS Media.

, , Modernizer, , .

0

More articles:


All Articles