我正在使用来自http://detectmobilebrowsers.com/的脚本来检测是否正在移动浏览器上查看网站。
如果网站在移动浏览器上,我会展示一个精简的简单幻灯片。如果它是一个普通的浏览器,我会展示一个非常棒的超级幻灯片。我想优化我的图像,使它们在移动幻灯片上尽可能小。我的移动幻灯片是响应式的,所以它会缩小以适应任何窗口,但我不想让它最初变得比它绝对必须的大。
有谁知道当前移动浏览器阵列的最大宽度是多少?或者更确切地说,使用http://detectmobilebrowsers.com/脚本检测到的移动设备的最大宽度?
顺便说一句,我不是要在浏览器中加载页面后如何检测宽度。
谢谢!!
编辑....
我想你们误解了我的问题。我正在使用最大宽度: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 /图像测试/)。我的媒体查询确定要显示哪个幻灯片不会使用户不必下载当前未显示的幻灯片图像。之所以使用它,是因为简单的幻灯片在小屏幕上看起来比复杂的要好。使用移动检测屏幕可确保不会下载未显示的图像。
当我的图像设置为 100% 宽度并且会缩小以适应任何尺寸时,为什么我要关心当前移动设备上的最大宽度是多少?因为 900 像素宽的图像比 600 像素宽的图像具有更大的文件大小。如果我知道图像需要的最大宽度是多少,我可以将幻灯片保存到最初的那个大小,从而节省一些额外的带宽。你们有没有在移动设备上观看过幻灯片?减缓!
如果有人能指出我正确的统计数据,我将不胜感激。我用谷歌搜索,但找不到我需要的东西。