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 */
}