HTML/CSS

Googleカレンダーがスマホで見ると縦長になってしまう時の対処法

Googleカレンダーがスマホで見ると縦長になってしまう時の対処法

これで解決!比率を固定する方法

Googleカレンダーは、共有機能を使って誰でも予定を見られるように公開することができます。

しかし公開したGoogleカレンダーをサイトに埋め込んだ時、スマホで見る時だけ縦長いということはありませんか?

Googleカレンダー

縦長になると文字が見にくいという問題が出てきます。

これを解決するには、まずGoogleカレンダーの埋め込みコード内にある「width」と「height」の値を「100%」に指定します。

Googleカレンダー登録画面

Googleカレンダーの埋め込みコードをHTMLに記載するときは、適当なdivで囲んであげましょう。

それから以下のCSSを追加すると、縦横比が固定されるため、PCで見てもスマホで見ても同じ比率で表示することができます。

「.google-calendar1:before」の「padding-top」で高さを取っているので、%の値を変えると好きな比率に変更できます。

実際に埋め込んでみました

完成形はこんな感じです。

スマホで見ても、ウィンドウサイズを変えても同じ比率で表示されます。



おわり

以上、「Googleカレンダーがスマホで見ると縦長になってしまう時の対処法」でした。

少してもお役に立てれば幸いです。