How Can I Prevent Font Size Changes in iPhone Web Apps During Orientation Shifts?

Preserving Font Size in iPhone Orientation Changes

Many web applications encounter a frustrating issue where the font size of hyperlinks changes when the iPhone switches from portrait to landscape mode. To preserve the desired font size, the following steps can be taken:

Firstly, define the font size in the CSS, ensuring it is set as desired in portrait mode. For instance:

ul li a {
    font-size: 14px;
    text-decoration: none;
    color: #cc9999;
}

Next, disable the default behavior using the -webkit-text-size-adjust CSS property. This property prevents scaling of font size. Implement it as follows:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

The Safari Web Content Guide provides further information on the use of this property. By implementing these steps, the font size of hyperlinks will remain consistent regardless of the iPhone's orientation.

The above is the detailed content of How Can I Prevent Font Size Changes in iPhone Web Apps During Orientation Shifts?. For more information, please follow other related articles on the PHP Chinese website!