iPhone 5 Media Query

Apples iPhone 5 has a larger display compared to its previous versions. If you need to target the iPhone 5 specifically then this CSS media query should get you out of trouble.

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

  // iPhone 5 or iPod Touch 5th generation styles


Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.


  1. Awesome!

  2. Just about to start developing a new responsive layout and needed to look for this, saved me some time. Much appreciated ;)

  3. Thanks you! Very Helpful!!!

This post currently has 3 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *