How to Prevent iPhone Hyperlink Font Size Changes on Orientation?

How to Maintain Hyperlink Font Size During iPhone Orientation Changes

When developing mobile web applications, maintaining a consistent user experience across different device orientations is crucial. This includes preserving the styling of text elements, such as font size.

One issue arises when rendering hyperlinks on the iPhone. By default, when switching from portrait to landscape mode, the font size of hyperlinks increases significantly. This can disrupt the visual aesthetics and readability.

Solution: Disable Text Size Scaling with -webkit-text-size-adjust

To address this issue, you can utilize the -webkit-text-size-adjust CSS property. This property allows you to disable font size scaling during orientation changes while still allowing users to zoom in or out.

Here's how to implement this solution:

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

By setting the -webkit-text-size-adjust property to 100%, you effectively neutralize the device's default behavior of enlarging text in landscape mode. As a result, hyperlinks will maintain their font size regardless of the device's orientation.

Example:

In your example provided:

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

Adding the -webkit-text-size-adjust property to the HTML element will ensure that hyperlinks retain their 14px font size in both portrait and landscape orientations.

The above is the detailed content of How to Prevent iPhone Hyperlink Font Size Changes on Orientation?. For more information, please follow other related articles on the PHP Chinese website!