[英]best method of detecting mobile browsers with javascript/jquery?
For a site I'm working on I'm implementing image preloading with javascript however i most certainly do not want to call my preload_images()
function if someone is on slow bandwidth. 对于正在工作的网站,我正在使用javascript实现图像预加载,但是如果有人带宽很慢,我当然不希望调用我的
preload_images()
函数。
For my market the only people with slow bandwidth are those using mobile internet on a smartphone. 对于我的市场,只有带宽缓慢的人是在智能手机上使用移动互联网的人。
What's the best approach for detecting these users so i can avoid image preloading for them? 检测这些用户的最佳方法是什么,这样我就可以避免为他们预加载图像?
option 1 : detect browser width 选项1:检测浏览器宽度
if($(window).width() > 960){ preload... }
option 2: detect user-agent with a list of browser to preload for 选项2:使用要预加载的浏览器列表检测用户代理
if($.browser in array safelist){ preload... }
are there any better options? 有更好的选择吗?
I find that I dislike sites that decide which version of the site I should access on a particular device or environment. 我发现我不喜欢那些决定应该在特定设备或环境上访问哪个版本的网站的网站。 It's great to make an initial decision based on whatever criteria you settle on, but for goodness sake, give me a link I can click so I can choose the "Higher Bandwidth Site" or vice versa and save it to a cookie.
可以根据您确定的任何标准做出初始决定,这很不错,但是,出于善意,请给我一个链接,我可以单击该链接,以便选择“更高带宽的站点”,反之亦然,然后将其保存到Cookie中。 Then I can override any error the automated script makes with my own judgement.
然后,我可以根据自己的判断来覆盖自动化脚本所犯的任何错误。
Maybe using the CSS @media directive, along with hidden objects? 也许使用CSS @media指令以及隐藏对象?
.imagesToPreload {display:none;}
@media screen {
#imageToPreload1 {background-image:url('blah.img');}
}
@media handheld {
#imageToPreload1 {background-image:none;}
}
Then in Javascript, you can fetch all objects in "imagesToPreload" class, read the backgroundImage property and preload it if its not none. 然后,在Javascript中,您可以获取“ imagesToPreload”类中的所有对象,读取backgroundImage属性,如果不是,则将其预加载。
Admittedly, this is off the top of my head, I didn't test this idea. 诚然,这是我的首要任务,我没有测试这个想法。 As usual, there must be something I am not thinking about...
像往常一样,肯定有些事情我不在考虑...
I think edeverett's point about mobile not necessarily being slow (and similarly desktop not necessarily being fast) is a good one. 我认为edeverett关于移动不一定一定要慢的观点(类似地,桌面不一定一定要快)是一个很好的观点。
Remember not to remove choice for your visitors - ie most decent mobile browsers have an option not to load images (or specifically not to load large ones) and also avail of proxy services that compress images before downloading - some mobile visitors may want the full preloaded experience on your site. 切记不要为访问者留下选择-即大多数体面的移动浏览器都可以选择不加载图像(或专门不加载大图像),还可以利用代理服务在下载之前压缩图像-一些移动访问者可能希望完整地预加载您网站上的体验。
Another solution might be something like: if($(window).width() < 320){ preload_smaller_images(); }
另一个解决方案可能是这样的:
if($(window).width() < 320){ preload_smaller_images(); }
if($(window).width() < 320){ preload_smaller_images(); }
There's less reason than there used to for the mobile browsing experience to be more limited than that of the desktop. if($(window).width() < 320){ preload_smaller_images(); }
与台式机相比,移动浏览体验受到的限制比以往任何时候都要少。
R. Hill's CSS suggestion is not the worst though (if it can be done in CSS, it should imo), it can also be done per-screen-size: @media handheld, screen and (max-width: 320px){ /* */ }
R. Hill的CSS建议虽然不是最坏的建议(如果可以在CSS中完成,则应该是imo),也可以按屏幕大小完成:
@media handheld, screen and (max-width: 320px){ /* */ }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.