HOME / GUIDES /
Media Queries for Standard Devices

 Avatar of Chris Coyier
Chris Coyier on Oct 8, 2010 (Updated on Aug 2, 2021)
This page lists a ton of different devices and media queries that would specifically target that device. That’s probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context.

If you think responsive’s simple, I feel bad for you son. We got 99 viewports, but the iPhone’s just one.
—Josh Brewer, March 10, 2010
A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

If you’re looking for a comprehensive list of media queries, this repository is a good resource.

If you’re reaction to this is: you should never base your breakpoints on devices!! You have a good point. Justin Avery has a nice post on the possible pitfalls of using device-specific breakpoints. Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control.

 Phones and handhelds
 iPhone
 Galaxy Phones
/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
 padding: 10px;
 border-radius: 1em;
 height: 380px;
 width: 400px;
 margin: auto;
 background-color: #191b28;
 box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
 font-family: 'Orbitron', sans-serif;
 background-color: #dcdbe1;
 border: solid black 0.5px;
 color: black;
 border-radius: 5px;
 width: 100%;
 height: 65%;
}
.button {
 font-family: 'Orbitron', sans-serif;
 background-color: #64278f;
 color: white;
 border: solid black 0.5px;
 width: 100%;
 border-radius: 5px;
 height: 70%;
 outline: none;
}
.button:active {
 background: #e5e5e5;
 -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
 -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
 box-shadow: inset 0px 0px 5px #c1c1c1;
}