Q&A
もともとの問題なかった状態、現状の詳細と、その間にソースの変更などをしたらその内容を書いていただけますでしょうか。
###前提・実現したいこと
レスポンシブで一度は問題なく表示されていたサイト
###発生している問題・エラーメッセージ
スマホで表示された時に、レスポンシブ対応によりスマホ用に表示されるはずのサイトが、PC表示になり、さらに、スライダー画像部分も隠れて表示されるはずの画像が一行3枚横並びに表示されています。
そのスライダー部分だけ幅が広く表示され、
上記の記載を訂正いたします。
PC表示になりではなく、スマホ用に表示になっているのですが、スライダー部分が横一行に4枚画像が並んだ状態で始まります。
サイト読み込み時は、一瞬正常にそれぞれのバナーなど100％表示されますが、その後すぐスライダー部分だけが横並び画像が見える状態になります。
スライダー以外の部分は、縮小されて左寄せで表示されています。
###ソースコード
追記させていただきます。
もともと問題なかった状態は、スマホ最適化された表示になっていました。
ソースの変更は行っていないです。
###補足情報(言語/FW/ツール等のバージョンなど)
こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。
回答4件
0
なぜか、タブレットCSSとスマートフォンCSSが同じになっていますので、
css
1/* ----------------------------- 2 スマートフォン CSS 3----------------------------- */ 4@media screen and (max-width: 768px) {
style.cssの↑を↓に変更してみてください。
css
1/* ----------------------------- 2 スマートフォン CSS 3----------------------------- */ 4@media screen and (max-width: 640px) {
flexsliderは19時現在のままで！
投稿2015/12/21 09:59
総合スコア36087
ありがとうございます。
試してみます！
変更してみましたが、変化なしでした。
Ctrl + F5 を押してみてください。私の環境で拝見すると問題なさそうです。
実機で試しましたが変化なしでした。( ;∀;)
うーん…… やはりこちらからですとちゃんとできているように見えます。
https://www.dropbox.com/s/2158bkqfjeaupyt/%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3.JPG?dl=0
そちらではブラウザは何を使っていますか？
こちらは、iphone6plusとiphone5の実機で確認しました。
CROMEでは問題ないようになってました。
え、もしかして、ページからはみ出してスライドが横に並んでいるのがダメなんでしょうか？
そうだとすると、PC表示でもそうなってますよ。
0
ページを拝見しました。
どうやら、スライダー以外の部分はレスポンシブ表示されているようです。
#####気になる点が3つ。
- javascriptエラーが二つ出ている。(jquery.flexsliderはともかく、SyntaxHighlighterとか何のために使っているのか謎)
- js/jquery.flexslider-min.js を二回読み込んでいる。
- jquery.js を2回読み込んでいる。
これ、サーバ移転した際にwordpressに移行したとか、そういうことしてませんかね。全体的に余分なものがくっついている感じがしますよ。
#####とりあえず試してみてほしいこと。
http://flexslider.woothemes.com/
↑こちらで、最新のflexsliderに差し替えてみる。または、古いものに戻してみる。
ダメなら、jQueryのバージョンを1.6ぐらいに戻してみる。
というようなことをすると上手くいきそうな気がしますよ。
投稿2015/12/18 11:18
総合スコア36087
Lhankor_Mhy 様、ご親切に本当にありがとうございます。
早速今からご指導通り試してみます。
取り急ぎお礼申し上げます。
試してみまして最新のflexsliderに差し替えててもダメでした。
知識不足ですみません、古いものに戻してみるというのは、どの古いものにするか分らなかったです。jQueryのバージョンを1.6ぐらいに戻してみる方法も、調べましたがわかりませんでした。ほんとに無知ですみません。
たった今見てみましたら、スライダーのレスポンシブ動作ができているようでした。（スクリプトのエラーも消えています）「ダメ」というのは具体的にはなにがダメでしたか？
あ、768pxビューがおかしいですね。
0
bootstrapでは768px以上でPC向けの表示になるようになってますが、
このサービスでは768pxと640pxで表示が変更されるようになっています。
style.cssの以下の部分の指定を768pxに指定すれば想定通りに表示になりますでしょうか。
@media screen and (max-width: 640px) {
また、ソースの変更は行っていない状態で表示が変わることは考えにくいので、
想定してない変更があったか確認する端末が変わったか、そのあたりの確認をしてみるといいと思います。
投稿2015/12/18 07:12
総合スコア408
試してみます。
ご親切にありがとうございます。
768pxに変更して更新してみましたが、解決してないです。
何か変化あるとすれば、辞めた前任者がサーバーを移行したかもしれないです。
端末は異なる端末で確認しましたが同じような現象でした。
解決できないですか、すみません。。ちなみにどういう状態が正常なのでしょうか。質問の発生している問題が途中で切れてるので補足してもらえるともう少しわかるかもしれません。
また、PCのchromeやfirefoxなどのデベロッパーモードで幅変えながら確認してみるとなにか見つかるかもしれません。
いえいえ、教えていただいているのに、mhashi様からすみませんなどとんでもないです。
私の説明がわかりにくいと思いましたので、訂正してみました。
不具合の状態についてお分かりいただけるといいのですが
0
期待通り表示されていたときのコードとdiffを取ってみてはいかがですか？
投稿2015/12/18 06:41
総合スコア5568
あなたの回答
tips
プレビュー
