シリウスでのレスポンシブウェブデザイン構造追加によるカスタマイズを
実行する際リキッドレイアウトが発動する指定値はどの地点か？

 

デバイスにより指定値でどのように表示されるか？

 

また　レスポンシブウェブデザイン構造を２重配置で複数のデバイスに
対応表示する手順

 

 

以上を説明します

 

 

 

各端末により　レスポンシブ化はメディアクエリで数値指定しますが

 

その位置決めを理解すれば　すべてのデバイスに対応可能となります　

 

けれど全てに対応させるとなると原本ページがすべてに対応すると
いう訳でもなくデバイス用に調整も必要ですし作業労力も膨大な時間も
費やすことになります

 

更新だけでも大変ですね

 

それ以前に　全てのデバイスを所持していないもので　確認が
未確認どまりで説明しきれないという事情もあります？？？

 

パソコン　iPhone ipad 所有

 

そんなことで　大まかな範囲での説明としますが　複数のデバイスを
指定したい方は　複合化の説明を含めておりますので
自己努力でお進みください

 

スポンサーリンク

 

 

 

---

 

以下の解説は私の環境での解説です

 

スマートフォンはiPhone6
ipadは　?です　サイズは理解できませんがやや普通かな？

 

 

ネット上ではスマートフォン対応としてのメディアクエリ指定値は6４0pxと
説明がされてはおりますが

 

@media(max-width:640px){

 

で指定した場合

 

iPhone　縦画面では正常反映

 

iPhone6　横画面では反映されません
パソコンサイトで表示される状況です

 

 

iPhone6の場合
横画面では数値指定値が小さ過ぎるのです

 

ただし　横画面の小さなiPhoneでしたら反映されるかもしれません？

 

 

---

 

数値を670ｐｘに変更

 

@media(max-width:670px){

 

iPhone6　この数値で縦横画面とも正常に反映されました

 

 

ipadでは　縦横とも未反映です

 

 

---

 

メディアクエリ指定値を698pxにしてみました

 

@media(max-width:698px){

 

iPhone6　縦横とも正常に表示

 

ipadでは　縦は正常反映されましたが　横では反映されません

 

 

 

縦はレスポンシブ化されたリキッドレイアウトです

 

横画面では　リキッドレイアウト以前のパソコンサイトですが
認識状況は如何でしょうか？

 

横はパソコンサイトが画面サイズにちょうど収まり
サイトの認識もなんら問題なし

 

私はこの環境で閲覧状況は充分かと判断しますが？

 

 

基本的にレスポンシブ化されたリキッドレイアウトは　
スマートフォンの画面サイズでの閲覧状況にあてはめたも

 

パソコンサイトを画面の小さなスマートフォンでも充分に認識出来る
画面として対応されたもの

 

とすれば
スマートフォンの画面サイズより大きなデバイスならipad縦画面以上なら
パソコンサイトでも充分認識できるはず

 

とすれば　これでよいのでは？

 

 

しかしながら問題点もあるのです

 

 

スマートフォンサイトで　パソコンサイトの記事配列同様に
記事折り返しを含ませないための対策としてフォントサイズの
縮小を指定した場合

 

ipad縦画面では　レスポンシブ化の影響でフォントが
スマートフォンサイズと同じサイズで表示され

 

小さすぎて　見ずらいとなるのです

 

スマートフォンでは十分認識できるフォントサイズでも枠が
大きくなると小さすぎてストレスが？

 

上記の影響を回避するには　ipad縦画面でのフォントサイズを
スタイルシートで大きく指定すればよいのですが

 

メディアクエリをあと一つ追加することになるのです

 

 

 

---

 

もう一つのレイアウトを指示する

 

あと一つはどこまでのサイズで指定するか

 

 

範囲を絞ってのレイアウトを指定するには

 

スタイルシート内に記載済みのメディアクエリの下に再度

 

範囲指定のレスポンシブ化コードを追加します

 

 

指定値はmin-width: 671pxからmax-width: 768pxとします

 

上部解説の　max-width: 698ｐｘでは　
ずれが生じてレスポンシブ化が反映されなくなりましたので

 

max-width: 768pxサイズに変更します

 

 

記述コード
@media screen and (min-width: 671px) and (max-width: 768px) {

 

671から768までの範囲を指定します

 

作業を簡素化するために

 

メディアクエリ内記載コードは　現時点のレスポンシブ化コードで
良いので　そのままコピーして@mediaを入れ替え

 

 

次に範囲内で表示されるスタイルを書き換えます

 

フォントサイズをパソコン同様に指定すれば　

 

ipad縦画面では　指定サイズで表示されます

 

その他　カテゴリー記事とかエントリー関連記事とかもフォントサイズを
指定します

 

 

複合レイアウトはここで終了

 

---

 

元に戻ります

 

 

width: 798以上で指定した場合は

 

@media(max-width:798px){

 

798pxのデバイスまで　リキッドレイアウトが反映され　それ以上では
パソコンサイト表示と同様になります

 

900pxとか1000pxのサイズ指定サイトもございますが　
ウェブ上に決まりきったサイズ指定というものが無い状況で
運営者様により指定値はまちまちですね

 

 

---

 

重要

 

閲覧デバイスは複数御座います

 

当サイトは　当初パソコンサイズデフォルト原本が優先され　それ以外の

 

タブレットサイズ　スマートフォンサイズを指定しておりました

 

タブレットサイズの指定です
@media screen and (min-width: 671px) and (max-width: 768px) {

 

このサイズ以上はパソコンサイズが適用されました

 

通常は　この位置まで指定しておけば　以上のサイズはパソコン画面
としてデバイス表示され　ほとんど問題ないかと思われます

 

しかし
当サイトの場合　背景画像の固定指定をＩＯＳでも反映されるよう
個別指定する必要に迫れました

 

なぜかというと　以上のサイズでは背景画像の固定化がＩＯＳでは
反映されないとう事情で　768px以上でもレスポンシブ化することに
なったのです

 

もう一つのメディアクエリの追

 

@media screen and (min-width: 769px) and (max-width: 1900px) {　

 

769以上から
min-width: 769px
max-width: 1900pxサイズまで

 

最初はこれでＯＫと判断していたのですが

 

気が付かずのミスがありました

 

ワイド画面で確認すると複数設定している背景画像が
混同してしまうというズレです

 

ややサイト画面を狭めると解消するのですが
ワイド画面オンリーという方もあられるでしょうからそれらにも対応
しなければならないわけですね

 

 

 

スマートフォンサイズ　タブレットサイズ以降のもう一つのサイズを　
指定した場合

 

最大値を間違えると　背景画像の固定とか何かしらの可変を加えていると
反映されないデバイスがございます

 

メディアクエリの作動位置の限界を１９００PXで指定しておきましたところ
ワイドのパソコン画面で　背景画像が固定されておりませんでした

 

１９００PX以上での画面サイズは固定されていない
以下サイズはでは正常に固定されている状況

 

ほとんど2月くらい...boketorimasune

 

いつもやや小さめにしているので気が付かなかったのです

 

以下のサイズに書き換えましたら障害は消えました

 

@media screen and (min-width: 769px) and (max-width: 3000px) {

 

max-width: 3000px　何てサイズあるんかいなと？

 

768以上から
min-width: 769px

 

このサイズまでをレスポンシブとする指定です
max-width: 3000px

 

あなたのサイト　もし画面が標準サイズでしたら

 

確認でき無い事もあります

 

標準的サイズなら　なんら異常なしのサイトレイアウトでも

 

ワイド画面で確認するとあちこちにあらが見えるとか？

 

何れかの方法でワイド画面ｐcで表示確認をされてみてください

 

 

 

説明不足でした

 

申し訳ありません

 

 

 

レスポンシブウェブデザインのレイアウト表示例
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ