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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

5874閲覧

iphone Safariでブラウザバックすると表示していた画像が消える現象

退会済みユーザー

退会済みユーザー

総合スコア0

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2017/07/20 12:46

編集2022/01/12 10:55

###前提・実現したいこと
iphone Safariの戻るボタンを押した後も画像が表示されるようにしたいです。
わかる方、教えていただけるとありがたいです。よろしくお願いします。

###発生している問題・エラーメッセージ
iphoneのブラウザーの<を押して戻ると下のイメージのようにさっき見ていたページのリンク画像が表示されません。PC、Android端末で試したところ正常に表示され問題ありませんでした。また、ブラウザバックではなく、ページ内<a>戻る</a>で戻ると正常に表示され問題ありませんでした。

###該当のソースコード

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>サイトタイトル</title> <meta name="description" content="紹介文"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- ※レスポンシブ(style.css) --> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <link rel="stylesheet" media="all" type="text/css" href="css/css.css" /> <!-- ※デフォルトのスタイル(style.css) --> <link rel="stylesheet" media="all" type="text/css" href="css/tablet.css" /> <!-- ※タブレット用のスタイル(tablet.css) --> <link rel="stylesheet" media="all" type="text/css" href="css/smart.css" /> <!-- ※スマホタッチ系のjquery--> <script src="js/jquery.mobile.custom.js"></script> <!-- ※iosタッチ系のjquery--> <script type="text/javascript" src="js/ios.js"></script> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <body> <!-- メニュー --> <div id="globalnavi"> <div id="rogo-menu"> <div class="rogo"> <li id="title"><h2>サイトタイトル</h2></li> </div> <div class="menu"> <ul> <li id="menu4"><a href="contact.html">contact</a></li> <li id="menu2"><a href="profile.html">profile</a></li> <li id="menu1"><a href="#">home</a></li> </ul> </div> </div> </div> <!-- 問題箇所↓ --> <div id="content"> <div id="main"> <div class="link"> <img src="img/title1.png" alt="web&app" width="200" height="200"> </div> <div class="link"> <a href="work/1.html"> <img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton1.png'" onmouseout="this.src='img/botton1-2.png'" ></a></div> <div class="link"> <a href="work/2.html"> <img src="img/botton2-2.png" onmouseup="this.src='img/botton2-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton2.png'" onmouseout="this.src='img/botton2-2.png'" ></a></div> <div class="link"> <a href="work/3.html"> <img src="img/botton3-2.png" onmouseup="this.src='img/botton3-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton3.png'" onmouseout="this.src='img/botton3-2.png'"></a></div> <div class="link"> <a href="work/4.html"> <img src="img/botton4-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton4.png'" onmouseout="this.src='img/botton4-2.png'" onMouseUp="this.src='img/botton4-2.png"></a></div> <div class="link"> <img src="img/title2.png" alt="Graphic" width="200" height="200"></div> <div class="link"> <a href="work/5.html"> <img src="img/botton5-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton5.png'" onmouseout="this.src='img/botton5-2.png'" onMouseUp="this.src='img/botton5-2.png"></a></div> <div class="link"> <a href="work/6.html"> <img src="img/botton6-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton6.png'" onmouseout="this.src='img/botton6-2.png'" onMouseUp="this.src='img/botton6-2.png"></a> </div> <div class="link"> <a href="work/7.html"> <img src="img/botton7-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton7.png'" onmouseout="this.src='img/botton7-2.png'" onMouseUp="this.src='img/botton7-2.png"> </a> </div> <div class="link"> <a href="#"> <img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'"> </a> </div> <div class="link"> <a href="#"> <img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'"> </a> </div> <div class="link"> <img src="img/title3.png" alt="sketch" width="200" height="200"> </div> <div class="link"> <a href="work/10.html"> <img src="img/botton10-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton10.png'" onmouseout="this.src='img/botton10-2.png'" onMouseUp="this.src='img/botton10-2.png"></a></div> <div class="link"> <a href="work/11.html"> <img src="img/botton11-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton11.png'" onmouseout="this.src='img/botton11-2.png'" onMouseUp="this.src='img/botton11-2.png"></a> </div> <div class="link"> <a href="#"> <img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'"></a> </div> <div class="link"> <a href="#"> <img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'"></a></div> </div> </div> <div id="profile"> <p></p> </div> <div id="footer"> <p>テキスト</p> </div> </body> </html> 【CSS】(該当箇所のみ) /* PC版CSS */ #content{ margin:auto; padding-top:120px; padding-bottom:50px; width:1000px; } #content a:hover img { opacity: 0.5; } #content a img { transition: opacity 1s ease-out; } #main{ width:1000px; margin:auto; } .link{ float:left; margin:25px; } /* スマホ版CSS */ #content{ margin-top:150px; height:100%; } #main{ margin:auto; width:320px; } #main .link{ height: auto; width :auto; } .link{ margin:15px; } .link img{ width:290px; height:290px; }

###試したこと
web上で調べて、onmouseupを追加して見たり、http://www.tokyoliteracy.co.jp/blog/58.htmlのサイトのコードを加えたり、hoverを抜いて見たりしましたが、改善されませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
使用言語(html CSS jQuery)
使用ツール(Adobe DreamweaverCC)

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

onmouseup="this.src='画像'"
を指定すると消えなくなります。

投稿2019/03/01 05:22

designjp3

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問