CSS to Specify Rules for iPad and iPhone

Specific CSS can be applied to iPad and iPhone devices.

@media only screen and (device-width: 768px) {
  /* iPad screen size rules */
}

@media only screen and (min-device-width: 481px) and 
(max-device-width: 1024px) and (orientation:portrait) {
  /* Portrait iPad display */
}

@media only screen and (min-device-width: 481px) and 
(max-device-width: 1024px) and (orientation:landscape) {
  /* Landscape iPad display */
}

Now for iPhone and other small screen devices we can specify rules as below:

@media screen and (max-device-width: 480px) {
  /* All devices with display width less then 480px 
  will obey the following rules */
}

For iPhone 4 this rule will be valid due to Apple special retina display in iPhone4:

@media only screen and (max-device-width: 480px), 
       only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone gte 4 CSS rules */
}

 

Share:
This entry was posted in CSS CheatSheets, Mobile Websites and tagged . Bookmark the permalink.

2 Responses to CSS to Specify Rules for iPad and iPhone

  1. Pingback: CSS to Specify Rules for iPad and iPhone | Fix CSS Problems | Restore Ipad

  2. Hi excellent website! Does running a blog similar to this take a massive amount work?
    I have absolutely no knowledge of coding however I was hoping to start my own blog soon. Anyways, if you
    have any recommendations or tips for new blog owners please share.
    I understand this is off subject nevertheless I just wanted to ask.
    Appreciate it!

Leave a Reply

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