###前提・実現したいこと
retina.min.jsでスマホ画面に切り替えたときに画像をretine対応にしたいです。
###発生している問題・エラーメッセージ
retina.min.jsをダウンロードして、ヘッダーに読み込みコードをいれまして、読み込み画像を2種類(通常画像:news_tit.png 高解像度用画像:news_tit@2x.png)をimagesフォルダにいれたのですが、スマホ画面になっても切り替わりません。
###該当のソースコード
index.html
<head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hoge.com</title> <link rel="stylesheet" href="css/gronavi.css" type="text/css" /> <script type="text/javascript" src="js/retina.js"></script> </head>
index.php → header.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>natsuki.com</title> <script type="text/javascript" src="js/retina.min.js"></script> </head>
###試したこと
参考サイトはこちらです。
http://blog.cntlog.net/?p=691
1.choromeの検証でスマホ画面で確認しましたが、index.htmlでは切り替わるのですが、index.phpでは切り替わりません。
###補足情報(言語/FW/ツール等のバージョンなど)
retina.min.jsはjsフォルダーに入っています。
よろしくお願いいたします
「スマホ画面になっても切り替わりません。」とは実際にどのように確認作業を行ったのでしょうか。
確認した際に使用した端末、ブラウザ、手順等を追記されたほうが良いかと思います。
修正依頼、ありがとうございます。
そして、重ねて申し訳ないのですが、読み込みコードを修正したら、高解像度用画像が表示されるようになりました。
retina.js→retina.min.jsです。
とんだ凡ミスでした...
ただ、該当ファイルのhtml以外に、本当に表示させたいのはhtmlをphpにしたwordpressのオリジナルテーマでして、こちらは切り替わりません。。。
ドメイン等の隠したい情報はhoge等にして、オリジナルテーマのheader.php又は該当テンプレートの<head>内を質問文に追記されたほうが良いと思います。
回答1件
あなたの回答
tips
プレビュー