How Can I Maintain Consistent Hyperlink Font Sizes on iPhones During Orientation Changes?

Maintaining Font Size Consistency in Hyperlinks Amidst iPhone Orientation Changes

Issue Description

Mobile web applications face a peculiar challenge when hyperlinks within list elements undergo drastic font size alterations as the device transitions between portrait and landscape modes. In portrait mode, the font size may be appropriately set at 14px, but it disconcertingly expands to 20px when the device is rotated.

Solution

This behavior is governed by the -webkit-text-size-adjust CSS property. To disable this feature and preserve the desired font size, implement the following:

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

This code ensures that the font size remains constant even as the orientation changes, while still allowing users to zoom in as needed.

Additional Information

For further details on the -webkit-text-size-adjust property, refer to the Safari Web Content Guide.

The above is the detailed content of How Can I Maintain Consistent Hyperlink Font Sizes on iPhones During Orientation Changes?. For more information, please follow other related articles on the PHP Chinese website!