• 목록

Looking for a specific

device’s viewport size?

Depending on both the browser and the user’s zoom settings, all mobile devices in responsive web design relate to a specific CSS width (known as “device-width”). Find your phone screen dimensions below in our handy list of viewport sizes by device.

https://viewportsizer.com/devices/ 

스마트폰 (가로/세로):

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

/* Styles */

}

스마트폰 (가로):

@media only screen and (min-width : 321px) {

/* Styles */

}

스마트폰 (세로):

@media only screen and (max-width : 320px) {

/* Styles */

}

iPad (가로/세로):

@media only screen and

(min-device-width : 768px) and (max-device-width : 1024px) {

/* Styles */

}

iPad (가로):

@media only screen and

(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */

}

iPad (세로):

@media only screen and

(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */

}

데스크탑 브라우저 (가로):

@media only screen and (min-width : 1224px) {

/* Styles */

}

큰 모니터:

@media only screen and (min-width : 1824px) {

/* Styles */

}

iPhone4와 같은 높은 해상도:

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}