比較バージョン

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

ステータス
colourYellow
titleWHatyav2

質問

情報

スマートフォンでチャットを表示させるとデザインが崩れているスマートフォンでチャットを表示させるとデザインが崩れてしまいます。どうすればスマートフォンに最適化されたサイズで表示されますか?

スマートフォンでチャット画面を開いとき、全画面表示にはなっているが以下画面のようにデザインが全体的に小さくなってしまっている。どうすればスマートフォンに最適化されたサイズで表示されるか?以下画面のように、スマートフォンでチャット画面を開いとき、全画面表示にはなっているが、デザインが全体的に小さくなってしまう場合がある。

...

解決策

これは、WhatYaのタグを埋め込んだサイトに以下のmetaタグが指定されていない為、発生します。

...

コード ブロック
<meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset='utf-8' />

※<meta charset='utf-8' />は文字化け防止の為、指定。>は文字化け防止の為、指定しています。

このmetaタグを指定する事で、スマートフォンでみたときに画面幅を取得した
デフォルトのサイズで表示されます。こちらのmetaタグを指定する事で、最適化されたデフォルトのデザインで表示されます。

...