先日、iPadでこのサイトを閲覧してみたところ、ページの右側部分がはみ出てました…。
そのため、急きょviewportの設定を下記のように変更させていただきました。
■変更前
<meta name="viewport" content="width=device-width, initial-scale=1.0">
■変更後
<meta name="viewport" content="width=device-width">
とりあえず、下記の私の環境では意図したとおりに表示されるようになりましたが、もし表示が崩れているようでしたらお知らせいただけると幸いです。
PC：Windows
スマホ：Android
タブレット：iPad
-----
この問題はだいぶ前から知られていたようでして、ネットで調べると「JavaScriptを使ってviewportの設定を振り分ける」という方法がよく見られました。
ですが、どうもその方法はしっくりこなかったので、今回、initial-scaleの指定を外すことで対応してみることにいたしました。
正直、width=device-width と initial-scale=1 の関係性が今一つ理解できていないのですが、、よくよく考えてみると、
「タブレットではPC向けのデザインを縮小して表示したい」と考えているにもかかわらず、initial-scaleで初期の倍率を1に指定しているのもおかしな話だなと思ったりして。
そもそも、なんで initial-scale=1 を指定してたんだっけ？＾＾； 覚えてない…。
もしこの設定で不具合が出るようでしたら、別の方法を検討してみたいと思います。
■参考ページ
https://blog.ousaan.com/index.cgi/links/20170430.html
そのため、急きょviewportの設定を下記のように変更させていただきました。
■変更前
<meta name="viewport" content="width=device-width, initial-scale=1.0">
■変更後
<meta name="viewport" content="width=device-width">
とりあえず、下記の私の環境では意図したとおりに表示されるようになりましたが、もし表示が崩れているようでしたらお知らせいただけると幸いです。
PC：Windows
スマホ：Android
タブレット：iPad
-----
この問題はだいぶ前から知られていたようでして、ネットで調べると「JavaScriptを使ってviewportの設定を振り分ける」という方法がよく見られました。
ですが、どうもその方法はしっくりこなかったので、今回、initial-scaleの指定を外すことで対応してみることにいたしました。
正直、width=device-width と initial-scale=1 の関係性が今一つ理解できていないのですが、、よくよく考えてみると、
「タブレットではPC向けのデザインを縮小して表示したい」と考えているにもかかわらず、initial-scaleで初期の倍率を1に指定しているのもおかしな話だなと思ったりして。
そもそも、なんで initial-scale=1 を指定してたんだっけ？＾＾； 覚えてない…。
もしこの設定で不具合が出るようでしたら、別の方法を検討してみたいと思います。
■参考ページ
https://blog.ousaan.com/index.cgi/links/20170430.html