【日記】viewportでのレイアウトについて

【日記】viewportでのレイアウトについて

前回の記事でviewportの使い所を書いてきました。
今回は私の経験でレイアウトが崩れてしまった場合の対処です。



viewportを設定したのに携帯端末でデザインが崩れるケース。
私が遭遇したものの一部で

・要素がスマートフォンの画面外に飛び出る
・スライドさせないと右側が見れない
・一部だけレスポンシブする
・width100%が端まで届かない
・position:fixedが変な場所に浮く

などなど。
順を追って見ていきましょう。

※記事の内容は私のスマートフォン環境
Andoroid5.2 ブラウザchromeが基準での話です。
他の機種、ブラウザ環境では異なる場合もあります。


1.要素がスマートフォンの画面外に飛び出る

まず要素がスマートフォンの画面外に飛び出て、
しかもスクロールもできなくなる場合。

これは発生させる原因により対処が変わりますが
私が遭遇したのは一部の要素だけレスポンシブされず
中身がboxから飛び出してしまった時です。


【日記】viewportでのレイアウトについて

図式するとこんな感じ。
この状態になった時、
普通は飛び出した要素に対してスマートフォンが縮小表示しますが
外側のボックスにoverflow:hiddenを設定すると
飛び出し部分を認識できなくなります。

PC上で作ってるとあたり前のことなのですけど
画面が変わるとわからないこともあります。


2.スライドさせないと右側が見れない

これは要素がスマートフォンの画面領域より大きくなった場合ですが
viewportで指定した値より内容が大きい時に発生します。

つまりviewportのwidthを600として
制作したWebサイトが800px幅を基準にしている時などです。


viewportの挙動の説明になりますが
設定したwidthが使用デバイスの横幅より大きい場合
画面の表示領域を拡大します。

今回の設定ではスマートフォンの基本である320px幅を
600px幅まで拡大していることになります。

こうするとスマートフォンのブラウザが
画面に幅600pxまでの内容しか表示しなくなるので
それ以上の内容は画面外に出てしまうわけです。


因みにdevice-widthを使ってる場合
スマートフォンではこの現象が起きません。
(機種に依る現象かもしれませんが)

スマートフォンのブラウザは画面幅320pxに表示しようとしますが
内容が大きければその分だけ画面幅を拡大してくれます。
機能としてよくわかりませんが、そういう風に動いています。


3.一部だけレスポンシブする

どういうことか。
まず例を見て頂きましょう。


【日記】viewportでのレイアウトについて

これは私のブログのCSSを書き換えて例にしたものです。
設定はheaderとmain-boxにwidth:1000pxを加えています。

歪になっているのがわかるでしょうか。


これについて説明する前にレスポンシブ対応について。

数年前まで携帯電話対応にはPC用ページと携帯用ページを作り
デバイスによってページを遷移させるという方法が取られていました。
(因みにAmazonなどは現在でもこのパターン。
恐らくレスポンシブ出来ない端末を切り捨てないため)

昨今では用意するページは一つだけで、
幅によってレイアウトを変更する手法が取られています。

これがレスポンシブ対応。
これを担っているのはCSS3に搭載されている機能です。
最近主流になっている要因はCSS3非対応ブラウザが
殆ど世に残っていないからでしょう。


レスポンシブ対応にはCSS3の@media要素、
メディアクエリーを使います。
ウインドウの幅でCSSを切り替える機能です。

ウインドウが640px以下なら
tex_areaクラスのwidthを100pxに設定する、など。


そして前回の記事に書きましたが
スマートフォン上でレスポンシブさせるにはviewportの設定が必要です。

今回はここに一つ問題があります。
では一つ質問。

viewportをdevice-widthに設定し、
横幅が800pxのレスポンシブしないサイトを作りました。

スマートフォン上では幅800pxのサイト全体が表示されています。

メディアクエリーは幅400px以下に設定しています。


この状態でメディアクエリーは動作するか否か。
答えは



動作します。



スマートフォンに表示されている内容が800px分であれば
ブラウザの幅は800pxではないの?
というと、違います。


スマートフォンブラウザのメディアクエリーの基準は
viewportで設定した値、
またはdevice-widthで算出される値だからです。

つまりいくら見た目が800px幅であっても
スマートフォンのブラウザは320px幅しかないと認識しているのです。


【日記】viewportでのレイアウトについて

というわけで再度例を見てみましょう。
headerとmain-boxはwidthを指定しているため伸びていますが、
他の要素はメディアクエリー通り
スマートフォン用のレイアウトに変更しようとしています。


補足として先程自分が遭遇した現象に
・width100%が端まで届かない
と書きましたが、原因はこれと同じです。

スマートフォンブラウザのwidth100%は
viewportで設定した値、
またはdevice-widthで算出される幅までです。


例えば上部メニューの幅はwidth100%で設定しており
確認すると305pxになっています。

対してheaderは1000pxを指定していますが
スマートフォンが幅を自動調整したため一杯まで伸びています。

これがレイアウト崩れの原因です。
スマートフォンレイアウトでは値指定と%指定でかなり違いがでます。
(div内など要素内に対する%指定はPCと共通)


またmain_boxは幅1000pxにしたものの、
中の要素はレスポンシブ対応し幅が変化しています。

これはボックスの大きさがメディアクエリー以上でも、
中の要素だけがレスポンシブ対応してしまうからです。

これも意図しないレイアウト崩れの原因ですね。


まとめとして、
スマートフォンブラウザの幅は
viewportのwidth、またはdevice-width基準になるということです。


4.position:fixedが変な場所に浮く

最後の問題は正直私も原因がわかっていません。
これはPad系に起こる現象です。

例えばwidth100%のメニューバーを作ったとして、
これはfixed指定しても幅が100%であるため
左右に隙間ができるはずがありません。

でもPadで見ると変な場所に浮いてることがあるのです。

完全に自分の経験則上でモノを言うと、
メニューバーの中の要素を中央に寄せようとした
marginの値分ずれて浮く感じになります。

本来ならmarginの値は隣接した値が
floatしてたりabsoluteでなければ影響しませんが
何故かPad使用時に影響が出ます。
原因はわかりません。

viewportで表示倍率を調整した時に
何らかの作用が悪さしているのではない、と思います。
正直 left:0 top;0 とか指定しておけば治るので
そう深く考える必要もありません。

ただそういうことは起こると覚えておくのは大切ですね。



以上がviewport使用時のレイアウト崩れで
自分が遭遇した原因の目立つところです。

この記事を読んだ人の何か助けになればこれは幸いに。

関連記事
スポンサーサイト




▼ この記事へのコメント
Name :
Title :
Comments :