媒体查询判断ipad和iPhone各版本

1. /* 判断ipad */

2. @media only screen

3. and(min-device-width :768px)

4. and(max-device-width :1024px){

5. /* style */

6. }

 

1. /* ipad横屏 */

2. @media only screen

3. and(min-device-width :768px)

4. and(max-device-width :1024px)

5. and(orientation : landscape){

6. /* style */

7. }

1. /* ipad竖屏 */

2. @media only screen

3. and(min-device-width :768px)

4. and(max-device-width :1024px)

5. and(orientation : portrait){

6. /* style */

7. }

1. /* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */

2. @media only screen

3. and(min-device-width :320px)

4. and(max-device-width :568px){

5. /* style */

6. }

1. /* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */

2. @media only screen

3. and(min-device-width :320px)

4. and(max-device-width :480px){

5. /* style */

6. }

1. /* iphone5分辨率 */

2. screen Width=320px(css像素)

3. screen Height=568px(css像素)

4. screen Width=640px(实际像素)

5. screen Height=1136px(实际像素)

6. Device-pixel-ratio:2

1. /* iphone4-iphone4s分辨率 */

2. screen Width=320px(css像素)

3. screen Height=480px(css像素)

4. screen Width=640px(实际像素)

5. screen Height=960px(实际像素)

6. Device-pixel-ratio:2