0

I am using a script from http://detectmobilebrowsers.com/ to detect whether a site is being viewed on a mobile browser.

If the site is on a mobile browser, I show a pared down, simple slideshow. If it is a regular browser, I show a whiz-bang super slideshow. I'd like to optimize my images, making them as small as possible on the mobile slideshow. My mobile slideshow is responsive, so it will shrink to fit in whatever window, but I don't want to make it any larger initially than it absolutely has to be.

Does anyone know what the maximum width is on the current array of mobile browsers? Or rather, the maximum width of mobile devices that are detected with the http://detectmobilebrowsers.com/ script?

BTW, I'm not asking how to detect the width once the page is loaded in a browser.

Thank you!!

Edit....

I think you guys misunderstood my question. I AM using max-width:100%. My images DO scale to fit any screen-size. And, I DO determine whether to show a simple slideshow or a complex one. Here's my logic:

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)

Why bother using mobile detection at all? Because even though for small screens I am only showing the simple, low-filesize slideshow on small screens, the images from the complex, image-heavy, high-filesize slideshow ARE STILL DOWNLOADED (http://cloudfour.com/examples/mediaqueries/image-test/). My media query determination of which slideshow to show doesn't save the user from having to download the images of the slideshow that's currently not shown. It's only used because the simple slideshow looks better on small screens than the complex one. Using the mobile detection screen makes sure that images that aren't shown, aren't downloaded.

Why do I care what the maximum width is on current mobile devices, when my images are set to 100% width and will scale down to fit any size? Because a 900px wide image has a larger filesize than a 600px wide image. If I know what the max width is that the image needs to be, I can save the slide down to that size initially, saving some additional bandwidth. Have you guys ever viewed a slideshow on a mobile device? Slow!

I would really appreciate if anyone can point me towards the proper stats. I googled, but couldn't find what I needed.

Tonya Abna
  • 121
  • 1
  • 7
  • For efficiency, and since you are using a slideshow in particular, I would let the browser (regardless of what platform) load in a nice first slide image and then determine whether to start loading in the rest in high resolution or a lower one. – TheZ Aug 14 '12 at 20:36

1 Answers1

0

The answer is almost certain to change as soon as you deploy the software.

It also depends on whether you mean pixels or screen-resolution-pixels (the Retina displays define them differently).

Perhaps it's best to stick with detecting mobile browsers (if you don't like the scripts you're using, see , e.g.: Detecting mobile browsers on the web?) and then let users opt into higher-rez images.

Alternately, you could try to detect bandwidth, which is really what you're optimizing for; 'mobile' is just a proxy for this, and only moderately correlated with it.

Community
  • 1
  • 1
Alex Feinman
  • 5,393
  • 1
  • 30
  • 48
  • Undoubtedly, the max-width of mobile devices will change over time. But I would still really like to know what the max-width currently is. If there is some online resource that lists such a thing, it would probably update overtime. I'll have to periodically update the device detection script anyway, as new devices are added to the market. At the same time, I would check again about the max-width of devices and start building my slides larger if necessary. – Tonya Abna Aug 15 '12 at 15:23