こないだ『レスポンシブwebデザインにしてみた』で手を加えたこのサイト
残念ながらいくつか表示不具合が確認されたから、それらを順に直してみた
ついでに、今まで使ってた Lightbox Plus をやめて PhotoSwipe への変更も。
画像サイズの問題
本文中の画像の横幅がウィンドウ（デバイス）幅より大きい場合にはみ出す結果にｗ
これはCSSを追加するだけで改善。
img {
max-width:100%;
height:auto
}
スマフォでの position:fixed 問題
OSバージョン上がってるけど、なんか改善されてるのかされてないのかようわからん
調べるのも面倒だったから、最小幅の場合は position:fixed を使わないように変更。
うっかり忘れてた viewport
これはうっかりつけ忘れてただけだったから追加ｗ
＜【HTMLヘッダー】テンプレートに追加＞
<meta name="viewport" content="width=device-width , minimum-scale=1, maximum-scale=1" />
ナビゲーションバーの位置
前の記事・次の記事へのリンクナビの位置を左端からの位置で設定してたから、右橋からの位置に変更。
a.next-link {
/*left:395px;*/
left:auto;
right: -15px;
}
PhotoSwipe
せっかくスマフォで見れるようにするんだから、それにあわせてイメージギャラリーも変更。
ソースは割愛ｗ
以上。
ひとまずスマフォで見ても問題なさげだから、/sp/ への振り分けは解除
