CSS3针对不同手机（IPhone和IPad）定义CSS样式的引用方法

当前无论电脑还是手机，屏幕大小分辨率都不尽相同，为使它们都能正常显示网页，CSS3 也被赋予了三头六臂的功能，可以针对不同屏幕大小不同分辨定义不同的CSS样式； 既可在同一个CSS文件中定义，也可以针对分辨定义一个独立的CSS文件。

当前有 IPhone 和 IPad 两种手机，由于它们使用不同内核的浏览器，所以同一网页它们显示不一样，可能在 IPhone 显示正常，而在 IPad 显示不正常，这就需要给它们定义独立的CSS样式。

一、CSS3针对IPhone定义CSS样式的引用方法

假如给 IPhone 手机定义一个独立的CSS样式文件，我们在html文件（或 aspx、php 文件）中应该如何引用呢？跟普通的CSS文件引用也差不多，只是需要增加一个 media 属性，在该属性中作相应的定义。假如已经定义好了一个针对IPhone手机的CSS样式文件IPhone.css，则用 html 文件中的引用方法如下：

<link type="text/css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/Images/IPhone.css" />

media 属性中的 -webkit 表示 webkit 内核的浏览器，使用该内核的浏览器有 Chrome（谷歌）和 Safari（苹果)。

二、CSS3针对IPad定义CSS样式的引用方法

CSS3针对IPad定义CSS样式时，可定义为竖屏和横屏两种，引用这两种样式的CSS文件方法也一样，只是在 media 属性中需要说明是竖屏还是横屏，两种CSS文件的引用方法分别如下：

定义为竖屏CSS文件的引用：

<link type="text/css" rel="stylesheet" media="all and (orientation:portrait)" href="/images/IpadPortrait.css" />

定义为横屏CSS文件的引用：

<link type="text/css" rel="stylesheet" media="all and (orientation:landscape)" href="/images/IpadLandscape.css" />

引用竖屏与横屏CSS文件的差别仅在 portrait 与 landscape，前者是竖屏的意思，后者是横屏的意思。