ソリッドレイアウト(横幅指定サイト)のviewportスマホ対応方法

スポンサーリンク

横幅をピクセル指定した(ソリッドレイアウト)サイトにおいて、viewportを使ってスマホ対応させる方法を今まで勘違いしていた。

例えば以下のようなソリッドレイアウトサイトに対して

ソリッドレイアウトサイトのサンプル

 

以下のようにCSS表記していた。

 

まあこれでも正常にブラウザに表示される場合も結構あるのだけど、実は、一部分のみが表示されて全体が表示しきれない場合がある。

(↓こんな感じ)
サイトのサイズがおかしくなっている例

当テスト環境だと、Android4.4やiOS8のデフォルトブラウザだと正常表示されたが、Android2.3では上記のようになった。

 

では、どうすれば良いのか?

答えは簡単。

<meta name="viewport" content="width=950">

これだけ。

 

なぜこれだけで良いのかは、以下のページで詳しく説明されているのでどうぞ♪

たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる|blog.鶯梭庵

コメント