HOME > WEB > 続・レスポンシブwebデザイン & PhotoSwipeへ変更
つぶやく
続・レスポンシブwebデザイン & PhotoSwipeへ変更

こないだ『レスポンシブwebデザインにしてみた』で手を加えたこのサイトpc
残念ながらいくつか表示不具合が確認されたから、それらを順に直してみたcoldsweats01

ついでに、今まで使ってた Lightbox Plus をやめて PhotoSwipe への変更も。

one 画像サイズの問題
本文中の画像の横幅がウィンドウ(デバイス)幅より大きい場合にはみ出す結果にw
これはCSSを追加するだけで改善。

img {
max-width:100%;
height:auto
}


two スマフォでの position:fixed 問題
OSバージョン上がってるけど、なんか改善されてるのかされてないのかようわからんdown
調べるのも面倒だったから、最小幅の場合は position:fixed を使わないように変更。

three うっかり忘れてた viewport
これはうっかりつけ忘れてただけだったから追加w

<【HTMLヘッダー】テンプレートに追加>

<meta name="viewport" content="width=device-width , minimum-scale=1, maximum-scale=1" />


four ナビゲーションバーの位置
前の記事・次の記事へのリンクナビの位置を左端からの位置で設定してたから、右橋からの位置に変更。

a.next-link {
/*left:395px;*/
left:auto;
right: -15px;
}


five PhotoSwipe
せっかくスマフォで見れるようにするんだから、それにあわせてイメージギャラリーも変更。
ソースは割愛w

以上。
ひとまずスマフォで見ても問題なさげだから、/sp/ への振り分けは解除shine
 

コメントを残す



このページのトップへ