解 説
レスポンシブなwebサイトで、タブレット用のレイアウトを設定せずにPCレイアウトのままタブレット端末に縮小表示したい場合、通常のviewportの設定ではコンテンツ幅が広すぎて見切れてしまうケースがあります。それを回避するviewportの設定方法をご紹介します。
1headの中にPHPで「viewport」を設定します。
// head内にPHPで記載します //スマホ時のmeta表示 //タブレット時のmeta表示 コンテンツ幅990px＋左右余白30px //PC時のmeta表示 コンテンツ幅990px
PCとタブレットを同じレイアウトにし、
タブレット端末よりコンテンツが大きい場合は縮小表示させて余白を持たせています。
そしてスマートフォンのみ端末サイズに合わせる viewport 設定です。
(スマートフォン表示はレスポンシブ等でCSSを変更し、レイアウトを可変させる前提)
OS別や各種端末別に最適化させる viewport 設定は１行で記述するのは難しいので、
条件分岐を使って記述を変えています。この方法であれば多くの端末に適応させることができます。
javascript で条件分岐を記述する方法もありますが、
Androidのタブレット・スマートフォンの区分け記述が難しく、
端末によっては希望通りのviewport が反映されないケースもありましたので
PHPでの記述をお勧めします。