iPhoneのハイパーリンクのフォントサイズが方向によって変更されないようにするにはどうすればよいですか?

iPhone の向きの変更中にハイパーリンクのフォント サイズを維持する方法

モバイル Web アプリケーションを開発する場合、さまざまなデバイスの向きで一貫したユーザー エクスペリエンスを維持することは重要です。重要な。これには、フォント サイズなどのテキスト要素のスタイルの保持が含まれます。

iPhone でハイパーリンクをレンダリングするときに 1 つ問題が発生します。デフォルトでは、縦モードから横モードに切り替えると、ハイパーリンクのフォント サイズが大幅に増加します。これにより、見た目の美しさと読みやすさが損なわれる可能性があります。

解決策: -webkit-text-size-adjust でテキスト サイズのスケーリングを無効にする

この問題に対処するには、以下を利用できます。 -webkit-text-size-adjust CSS プロパティ。このプロパティを使用すると、ユーザーがズームインまたはズームアウトできるようにしながら、向きの変更中にフォント サイズのスケーリングを無効にすることができます。

このソリューションを実装する方法は次のとおりです。

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

-webkit- を設定することにより、 text-size-adjust プロパティを 100% に設定すると、横向きモードでテキストを拡大するというデバイスのデフォルト動作が効果的に無効になります。その結果、デバイスの向きに関係なく、ハイパーリンクのフォント サイズは維持されます。

例:

提供された例では:

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

-webkit-text-size-adjust プロパティを HTML 要素に追加すると、ハイパーリンクのフォント サイズが 14 ピクセルに維持されるようになります。縦向きと横向きの両方で。

以上がiPhoneのハイパーリンクのフォントサイズが方向によって変更されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。