スマホで拡大を禁止したい

Question

お客様からの要望で、スマートフォンのあらゆる拡大を禁止したいとの依頼がありました。
Andoroidに関しては　user-scalable=no　で完了したのですが、iOSに関してはいろんなサイトを見て試しても拡大されてしまう状況です。

https://knoweb.net/html-css/html/ios-no-pinch-out/

http://iphone.f-tools.net/html5/Kakudai-Kinsi.html

https://qiita.com/peutes/items/d74e5758a36478fbc039

どこかに拡大できないページはないかと探したんですが、唯一以下の
スマホのブラウザゲームは拡大できませんでしたが、ソースを読み切れませんでした。
例
https://h5.g123.jp/game/hyakka?platform=zmrank&utm_source=zoom&utm_campaign=%E7%99%BE%E8%8A%B1%E7%B9%9A%E4%B9%B1&utm_adgroup=%E9%80%9A%E5%B8%B8%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E6%9E%A0&utm_keyword=zmrank

ご存知の方がいらっしゃいましたらよろしくお願いいたします。

Comments

[maisumakun]

何のために禁止したいのでしょうか？（「本来実現したいこと」と、他の手段でそれを達成する方法について要検討だと考えます）

[higashi]

ちょっとしたフリックの誤操作で、画面が拡大されるのを嫌っているとのことでした。
いま作成しているのが勤怠管理のアプリで現在htmlで制作しているところなのですが、基本的には生年月日、学歴など個人情報がメインで特に画像はページ内には入ってこない形になります。

[YT0014]

CSSではなく、未検証ですが
https://knoweb.net/html-css/html/ios-no-pinch-out/

[higashi]

ありがとうございます　これやってみたんですが、だめでした

[miyabi_pudding]

やってみたことは全て記載してください。

[higashi]

いえ、冒頭に記載しております

[miyabi_pudding]

大変失礼しました・・・。
回答させていただいたので、どうかご参考下さい。

[higashi]

ご連絡・ご確認ありがとうございました。現状は難しいということですね。

[higashi]

大変助かりました。先方にもそう伝えて納得していただこうと思います。

[miyabi_pudding]

左様です。
また、記載URLの、拡大を防いでいるサイトはPWAを使用しておりますので、PWAを使えば可能なのでしょう。

また、PWAは他にも、プッシュ通知など、ネイティブアプリケーションでないとできないような事を可能にします。
どうしてもとなれば、PWAを研究されるといいかと。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

これを入れるとある程度は解消されます。
ただし、iOSに関しては特に、下記動作においての拡大は絶対に防げません。

• ダブルタップ
• ピンチアウト
• フォーム要素にて入力モードになる時

（ただし、teratailでは、スマホでの入力時でも拡大されないので、文字の大きさなどにより防げるかも）

これらは、OS側の考えるユーザビリティ措置とデベロッパーの間で、長くいたちごっこが続いていましたが、
最近はOS側の制御が強固過ぎて、正直お手上げ泣き寝入り状態です。

JSで無理やり、拡大時に画面を縮小する、なんて方法がありますが、不都合が出まくるのは目に見えてるので（画面をタップできなくなる、など）お勧めできません。

Comments

[miyabi_pudding]

ちなみに、記載URLの、拡大が効かないサイトに関しては、
おそらくPWAを使用しています。
（ブックマークでローカルインストールされたので）
つまり、通常のWebサイトである限りは防ぐことはできません。