【Tauri Android】ピンチイン・ピンチアウトで画面が拡大縮小しないようにする

はじめに

Tauriとは

Tauriとは、デスクトップアプリ(Windows, macOS, Linux)およびモバイルアプリ(iOS, Android)¹を開発することができるフレームワークです。フロントエンドはHTML, CSS, TypeScriptで書くことができ、WebViewベースで構築されます。ローカルシステムとのやりとりはRustで書きます。いわゆるクロスプラットフォームと呼ばれるもので、ワンソースで複数のOS向けにアプリを開発できます。

この記事は何?

create-tauri-app で作ったTauriプロジェクトからAndroidアプリをビルドすると、デフォルトではピンチイン・ピンチアウトで画面の拡大縮小ができてしまいます。モバイルアプリとしては、ちょっとWeb感がしてしまいカッコ良くないです。
この記事では、ピンチイン・ピンチアウトで画面の拡大縮小ができないようにする設定を紹介します。

ピンチイン・ピンチアウトによる画面の拡大縮小を無効化

ピンチイン・ピンチアウトで画面の拡大縮小ができないようにする方法は簡単です。index.htmlの meta name="viewport" を以下のように修正するだけでできます。その他、特にAndroid側のWebViewの設定を修正したりする必要はありませんでした。

index.html

- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

おわりに

今回は、Tauriで作成したAndroidアプリにおいて、ピンチイン・ピンチアウトによる画面の拡大縮小を無効化する方法を紹介しました。HTMLのメタタグを1行修正するだけという非常にシンプルな対応で、よりネイティブアプリらしい挙動を実現することができます。

1. Tauri 2.0で正式にiOS, Androidアプリが開発できるようになりました。https://v2.tauri.app/blog/tauri-20/ ↩