How to link up Css file in html for different mobiles (IPhone and IPad)

At present, no matter the computer or mobile phone, the screen size and resolution are different. To enable them to display web pages normally, Css 3 is also given the function of three heads and six arms, which can define different Css styles for different screen sizes and resolutions. Defined in a Css file, you can also define a separate Css file for discrimination.

Currently, there are two types of mobile phones, IPhone and IPad. Because they use browsers with different cores, they display differently on the same webpage. They may be displayed normally on IPhone, but not on IPad. Therefore, you need to define independent Css styles for them.

I. How to link up Css file in html for IPhone

If an independent CSS file is defined for the iPhone, how should we refer to it in the html file (or aspx, php file)? It is similar to the ordinary Css file reference, except that a media attribute needs to be added, and the corresponding definition is made in this attribute. If a Css file "IPhone.css" for IPhone has been defined, the reference method in the html file is as follows:

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

The "-webkit" in the "media" attribute indicates the browser of the webkit kernel, and browsers using the kernel include Chrome (Google) and Safari (Apple).

II. How to link up Css file in html for IPad

When you define the Css for IPad, it can be defined as two kinds of portrait and landscape screens. The method of referencing the Css files to these two styles is also the same, just need to specify in the media attribute whether it is portrait or landscape, The reference methods are as follows:

How to reference a Css file defined as a vertical screen:

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

How to reference a Css file defined as a horizontal screen:

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

The difference between referencing vertical and horizontal screen Css files is only portrait and landscape. The former means vertical screen, and the latter means horizontal screen.