質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.40%

  • JavaScript

    21435questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12177questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8529questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

レスポンシブで画像切替ができないです

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,936

cotton88

score 79

スマホ表示からPC表示になった際に、画像がスマホ版の画像(top01_sp.jpg)のまま、引き伸ばされた状態になって困っています。

スマホ閲覧時に「PCサイトを見る」ボタンでviewportを書き換えてスマホ画面でPCサイトのレイアウトを表示するようにしています。
また、画像ファイル名の後ろの「_sp.jpg」から「_pc.jpg」に変えることでスマホ閲覧時用の画像とPC版の画像とを切り替えています。 

左がパソコン版、右がスマホ版の画像
左がパソコン版、右がスマホ版
パソコン版の正しい見え方
パソコン版の正しい見え方
スマホ版からパソコン版にしたあと
スマホ版からパソコン版にしたあと
デフォルトのviewportなど
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/common/vendor/jquery-1.11.2.min.js"></script>
<script src="js/common/jquery.cookie.js"></script>
ウィンドウサイズの変化によって変わる画像
<a href="/"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>
トリガーのボタン
<div class="switchViewportBtn pcNone"><a href="javascript:void(0)" id="btnPC">PCサイトを見る</a></div>

var wid = $(window).width();
var sp_windowWidth = 767;

$("head").append("<meta name='viewport' content="
    +($.cookie("switchScreen") == 1 ? 
        "'width=1024'" : 
        "'width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0'") +">");
    $(function() {
        $("#btnPC").click(function() {
            $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
            location.reload();
            return false;
        });
    });
if( wid < sp_windowWidth ){
        $('.imgChange').each(function() {
            $(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
        });
};

猫に罪はありません。
よろしくお願いいたします。


==================================================================
追記しました。
==================================================================

ご回答有難うございます。
私の説明が下手で伝わりづらかったようで申し訳ございません!

まず、スマホでの正しい表示は、こうなります。
イメージ説明その時のHTMLは、
<a href="/"><img src="img/top01_sp.jpg" width="300" height="100" class="imgChange" alt="" /></a>
@media only screen and (max-width: 767px) {
.imgChange {
 width: 150px;
 height: auto;
}
}
var wid = $(window).width();
var sp_windowWidth = 767;
if( wid < sp_windowWidth ){
        $('.imgChange').each(function() {
            $(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
        });
};
にして、対応しています。
この段階では問題ないのですが、

<div class="switchViewportBtn pcNone"><a href="javascript:void(0)" id="btnPC">PCサイトを見る</a></div>
$("head").append("<meta name='viewport' content="
    +($.cookie("switchScreen") == 1 ? 
        "'width=1024'" : 
        "'width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0'") +">");
    $(function() {
        $("#btnPC").click(function() {
            $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
            location.reload();
            return false;
        });
    });
を#btnPCのボタンをクリックして、PC表示にします。
そして、さっきの画像をみると、
<a href="/"><img src="img/top01_sp.jpg" width="300" height="100" class="imgChange" alt="" /></a>
@media only screen and (min-width: 767px) {
.imgChange {
 width: 300px;
 height: 100px;
}
}
※「top01_sp.jpg」は、横150px縦100px
※便宜上、上記CSSを書きました。本当は書いていません。

そのため、画像がビヨーンと引き伸ばされた状態になってしまいます。
イメージ説明
ここで
<a href="/"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>
にしたいのです!!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

ですね。猫に罪はないですよね、犬の方がかわいいけど。



動作確認してないですが、
if( wid < sp_windowWidth ){
        $('.imgChange').each(function() {
            $(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
        });
};
これを、
if( ( wid < sp_windowWidth ) && ( $.cookie("switchScreen") != 1 ) ){
        $('.imgChange').each(function() {
            $(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
        });
};
にしてみるとどうなりますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/26 20:21

    これからは御犬様と呼ばせて頂きます!ありがとうございます。

    キャンセル

0

ちょっと詳しくないので見たまま書きます。
<a href="/"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>
とHTMLの所にありますが、ここに画像(src="img/top01_pc.jpg")を300,100の大きさ(width="300" height="100")で表示するとあります。ここを最初から_spと書いても300,100なので引き延ばされます。
つまりこれが引き延ばされている原因なのでこの数値も変更する必要があります。サイズは見た目150,100位かな
数値を変更できない場合widthとheightを書かなければ画像そのままのサイズで表示される筈ですが、読み込みが少し遅くなるとの事です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/26 20:22

    ご回答ありがとうございました!何か機会がございましたらよろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21435questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12177questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8529questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。