0

どのスマートフォンからでもアクセスできる Web アプリを作成しています。ここに index.html ファイルがあります。

http://www.mediafire.com/view/?hy2jttea705ukpw

私はそれに2つのjQuery関数を持っています。1 つは、ユーザーが Web アプリを表示しているのが iPhone であるかどうかを検出することで、小さな吹き出しが表示され、それをホーム画面に追加するための詳細な指示が表示されます。次は、名前に「@2x」が含まれるルート フォルダー内の画像を Retina 画像に置き換えるスクリプトです。

これは私の問題です。時々動作しますが、元の画像を置き換える網膜画像が常に見つかるとは限りません。何か案は？

このプロジェクトをwww.iammarksummerton.co.ukで iPhone から表示して、私が言いたいことを確認できます。

4

2 に答える 2

1

そこにあるアプリを見て、問題があると思います。表示されない画像が名前に @2x 接尾辞が付いていると仮定すると、問題はそれらが 404 エラーを返すことです。
htaccessの何かが原因で、画像にアクセスできない可能性があります。それらの画像へのパスが間違っている可能性があります その画像が単にそこにない可能性があります

それを確認してください。問題が解決する可能性があります

重要ただし、javascript を使用してこの網膜画像を探すのをやめ、代わりに css ルートを使用することをお勧めします。私はJavaScriptが大好きですが、あなたがやろうとしていることにはやり過ぎです。

css クラス .heading を持つこれらの各画像は、コードで描画できます。おまけとして、アプリの読み込みが速くなることを保証します. これは、id を css に置き換える方法です。試してみたところ、見た目はまったく同じですが、画像を置き換える必要はありませんでした。

 **The html would be something like for each of those heading divs**
 <p class="heading">Can I access your social media?</p>

 **The css would be like**

 .heading {
      min-height: 53px;
      border: solid 2px #FD8B25;
      border-radius: 5px;
      line-height: 53px;
      text-transform: uppercase;
       font-weight: 600;
      font-size: 13px;
      padding: 0 12px;}

  .heading:after {
      content: '▼';/*You can replace '▼' with url(path/to/image) if needed */
      float: right;
  }

これは画像を置き換えるものではありませんが、コードベースであるため非常にシャープに見えます。css を使用して画像をより鮮明なものに変更し、javascript のオーバーヘッドを回避したい場合。これを使って...

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .myCSSClass {
           background:url('path/to/image');
           /*in the case of an image tag, add lots of padding margin so that original image is not visible*/
      }
  }

お役に立てれば。この解像度の問題を回避するには、問題がない場合は常に画像よりもコードを使用するようにしてください。これが問題になるのは、古いバージョンの IE をサポートする必要があり、すべてのグラフィック要素を保持する必要がある場合のみです。画像が多いウェブサイトの場合、通常、画像を最適化して Retina に最適化することは避けます。高速な読み込み時間は、高解像度よりも重要な場合があります。

于 2012-09-01T13:35:10.960 に答える
0

現時点では、レスポンシブ イメージに対する明確な解決策はありません。Chris Coyierが、いくつかのオプションの概要を説明しています。

どちらを選択しても、iPhone のみに 2x 画像を提供しないでください。1 つには、すべての iPhone が Retina ディスプレイを搭載しているわけではありません。2 つ目は、ある程度将来性のあるものを構築しようとしている場合は、特定のモデルの電話ではなく、ピクセル密度をターゲットにする必要があります。他のブランドやオペレーティング システムでは、近い将来、高 DPI 画面が搭載される可能性があります。結局、あなたの仕事は少なくなります。

于 2012-09-01T13:07:12.383 に答える