前提・実現したいこと
lightboxを使用したサイトをレスポンシブ化したい。
lightboxを使用しているサイトをレスポンシブ化するため、
CSSに以下のコードを打ち込みました。
CSS
1@media screen and (max-width: 375px) { 2 body { 3 width: 100%; 4 } 5}
しかし、画面幅はスマホサイズで表示しても、PCサイズのままでした。
デベロッパーツールを確認してみたところ、
width: 100%;は反映されていたものの、
背景が全てPCサイズのままといった具合です。
lightboxについて調べてみると、画像を大きく表示するためのjQueryのプラグインのようでした。
そしてlightboxはレスポンシブには対応していないものもある事が分かりました。
HTMLでは、しっかりviewportの設定はしてあります。
以下htmlのhead部分です。
HTML
1<head> 2<meta charset="utf-8"> 3<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4<title>DI-RAY official web site</title> 5<link rel="stylesheet" href="css/reset.css" /> 6<link rel="stylesheet" href="css/style.css" /> 7<link rel="stylesheet" href="css/lightbox.css"> 8<script src="js/jquery-1.11.3.min.js"></script> 9<script src="js/script.js"></script> 10<script src="js/lightbox.js" type="text/javascript"></script> 11</head>
試したこと
jQueryの理解が乏しいため、viewport部分のスペルチェックくらいしかできていません。
デベロッパーツールで375pxの画面を表示した際に、
viewportの設定は反映されており、375pxまでの表示になっているのですが、
実際の背景や画像などがPCサイズと同じサイズのため、右にずれ込んで表示されているといった感じです。
これは想定した表示ではありません。
補足情報(FW/ツールのバージョンなど)
当方のJavaScript、およびjQueryについての知識は基礎がまあわかる程度です。
Lightbox v2.10.0
実現したいことは、
CSSでwidth: 100%および width: auto; と指定した時に、
しっかり背景のサイズにも反映されている状態です。
説明不足な部分があればご指摘ください。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー