iPhoneのSafariだけ canvas が表示できなかった

開発中のWebサイトをiPhoneのSafariで確認したところ、 canvas の部分が正常に表示されていませんでした。

WindowsやMacのブラウザでは正常に表示されます。

実機デバッグで確認したところ、コンソールに以下のエラーが表示されていました。

Canvas area exceeds the maximum limit (width * height > 16777216).

Canvasの面積が最大限度を超えているようです。

canvas の面積が広すぎて表示できなかった。

PCのブラウザで canvas の面積を計算したところ、

• width: 9,931
• height: 1,760

であり、 width * height = 17,478,560‬ となり、見事に 16,777,216 をオーバーしていましたw

スクロールする前提で、広い canvas を用意していたのですが、そういった使い方はダメだったようです。

width, heightの値を小さくしたところ、ちゃんとiPhoneのSafariでも表示されました。

ちなみに、MacとiPhoneを接続すれば、iPhoneのSafariのコンソールを見ることができます。

iPhone実機で開いてるWebページのデバッグがしたい

開発中のWebサイトをiPhoneのSafariでアクセスしたところ、正常に動作していないことがわかりました。
WindowsやMacのブラウザでは正常に動作しているので、iPhone特有の症状のようです。

そこで、iPhone実機でデバッグする方法を調べたところ、MacのSafariを使った方法が一番簡単そうだったのでやってみました。

うまくできたので、忘れない内に記事に残します。

iPhoneの作業

まず、 設置 アプリを開きます。
Safari → 詳細 → Webインスペクタ をONにします。

次に、iPhoneのSafariでデバッグしたいページを開きます。

iPhoneとMacを接続する

MacとiPhoneをUSBで接続します。

iPhone側に このコンピュータを信頼しますか？ と表示されたら 信頼 をタップしてから、パスコードを入力します。

Macの作業

まず、 Safari を起動します。

メニューバーの 開発 にカーソルを合わせます。

もし、 開発 が見当たらない場合は、メニューバーの Safari → 環境設定 → 詳細 → メニューバーに"開発"メニューを表示 をONしてください。

メニューバーの 開発 にカーソルを合わせると、iPhoneのデバイス名がリストにあるので、そこにカーソルを合わせます。
すると、iPhoneのSafariで開いているページのURLがリストで表示されるので、デバッグしたいページを選びます。

そうすると、 Webインスペクタ というウィンドウが立ち上がります。

これで、デバッグ作業ができるようになりました。