http://detectmobilebrowsers.com/のスクリプトを使用して、サイトがモバイルブラウザで表示されているかどうかを検出しています。
サイトがモバイルブラウザ上にある場合は、簡素化されたシンプルなスライドショーを表示します。通常のブラウザの場合は、ウィズバンのスーパースライドショーを表示します。画像を最適化して、モバイルスライドショーでできるだけ小さくしたいと思います。私のモバイルスライドショーは応答性が高いので、どのウィンドウにも収まるように縮小しますが、最初は絶対に必要なサイズよりも大きくしたくありません。
モバイルブラウザの現在の配列の最大幅を知っている人はいますか?むしろ、 http://detectmobilebrowsers.com/スクリプトで検出されるモバイルデバイスの最大幅ですか?
ところで、私はページがブラウザにロードされた後の幅を検出する方法を尋ねていません。
ありがとうございました!!
編集....
皆さんは私の質問を誤解したと思います。私はmax-width:100%を使用しています。私の画像は、どの画面サイズにも合うように拡大縮小されます。そして、私は単純なスライドショーを表示するか、複雑なスライドショーを表示するかを決定します。これが私の論理です:
If the user is using a mobile device (based on the device detector)
show a simple slideshow
Else the use is NOT using a mobile device (based on the device detector)
If this is a small screen (based on media queries)
show a simple slideshow
Else this is a large screen (based on media queries)
show a complex slideshow
End If (based on media queries)
End If (based on the device detector)
なぜモバイル検出を使用するのが面倒なのですか?小さな画面の場合は、小さな画面に単純な低ファイルサイズのスライドショーしか表示していませんが、複雑で画像が多く、高ファイルサイズのスライドショーの画像はまだダウンロードされています(http://cloudfour.com/examples/mediaqueries / image-test /)。どのスライドショーを表示するかをメディアクエリで判断しても、ユーザーは現在表示されていないスライドショーの画像をダウンロードする必要がありません。これは、単純なスライドショーが複雑なスライドショーよりも小さな画面で見栄えがするためにのみ使用されます。モバイル検出画面を使用して、表示されていない画像がダウンロードされていないことを確認します。
画像が100%の幅に設定されていて、任意のサイズに合わせて縮小されるのに、現在のモバイルデバイスの最大幅を気にするのはなぜですか?900ピクセル幅の画像は、600ピクセル幅の画像よりもファイルサイズが大きいためです。画像に必要な最大幅がわかっている場合は、最初にスライドをそのサイズに保存して、追加の帯域幅を節約できます。モバイルデバイスでスライドショーを見たことがありますか?遅い!
誰かが私を適切な統計に向けることができれば本当にありがたいです。グーグルで検索しましたが、必要なものが見つかりませんでした。