Mobile Safari でのビューポートズームの無効化について (日本語)
2024-09-10
HTML の <meta> タグを使用することで、iOS の Mobile Safari におけるビューポートのズームを無効化することができます。
方法:
<meta>タグ を<head>セクションに追加します。name="viewport"属性を設定します。content属性に適切な値を指定します。
具体例:
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
属性の説明:
- width=device-width: ビューポートの幅をデバイスの画面幅に設定します。
- initial-scale=1.0: 初期ズームレベルを 1.0 (標準サイズ) に設定します。
- maximum-scale=1.0: 最大ズームレベルを 1.0 に設定し、拡大を制限します。
- user-scalable=no: ユーザーによるズームを無効にします。
注意:
- 適切な値を指定することで、ビューポートの動作を柔軟に制御することができます。
- 必要に応じて、他の属性 (e.g.,
minimum-scale) も使用できます。
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
他の方法:
- CSS を使用して、特定の要素のズームを無効化することができます。
- JavaScript を使用して、ビューポートのサイズやズームレベルをプログラム的に制御することができます。
html ios zooming
