🐡

flutter_inappwebview 6系でiPadでモバイル版やPC版を固定して表示する方法

2023/01/05に公開

結論

initialSettingsにpreferredContentMode.MOBILEとuserAgentを入れる

例(モバイル版で固定して表示する)

//モバイル版で固定して表示する
     InAppWebView(
              initialSettings: InAppWebViewSettings(
                  userAgent:
                      'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
                  preferredContentMode: UserPreferredContentMode.MOBILE),
   

片方のみ入れた場合

最初userAgentを入れずに試しており、
ほとんどのサイトでうまくいきませんでした。

そのため固定したいサイズのuserAgentを入れた方がいいと思います。
僕は以下のリンクからSafari、IOSのものをコピペしました。

モバイル判定のみで使うので、今回はOSで分けたりしていません。

https://deviceatlas.com/blog/mobile-browser-user-agent-strings

おすすめ

Flutterでアプリ開発を始める上での個人的なオススメをまとめています。
書籍はkindle unlimitedで新しいものを無料で読むのが良いと思います。

オススメ書籍

これから始める場合、flutter 1.x の時に書かれた本を読むのは辞めておいた方がいいです。
理由は、flutter 2.x 以降、null-safetyという仕様が加わり、書き方がガラッと変わりました。

僕は2.xがリリースされたあたりでFlutterを初めて、情報がアテにならずかなり苦戦しました。

これから始める方向け 【kindle unlimitedなら無料】

スマホで動くアプリを作ろう!ゼロから始めるFlutter実践入門編 ①: シンプルなアプリを作ってみよう
https://amzn.to/3yxutNM

初心者による初心者のためのFlutter詳解
https://amzn.to/39YcpSK

脱初心者向け(課金の実装など、具体的な実装方法や技術が書いてあります)

現場で使える Flutter開発入門
https://amzn.to/3kUXuLv

Discussion