How to hide the sharethis widget on mobile/handheld devices
Question
I am working on a website with the sharethis widget when i open the site in handheld devices like mobiles,tablets the sharethis widget hide the contents and disturb to view the site properly. so, i tried the below methods to hide the sharethis widget on handheld devices
Method 1:
var ua = navigator.userAgent.toLowerCase();
var checker = {
iphone: (ua.indexOf('iphone') >= 0 || ua.indexOf('ipod') >= 0 ||ua.indexOf('ipad') >= 0) ? true : false,
blackberry: ua.indexOf("blackberry") >= 0 ? true : false,
android: ua.indexOf("android") >= 0 ? true : false,
chrome: ua.indexOf("chrome") >= 0 ? true : false,
nokia: (ua.indexOf("symbian") >= 0 || ua.indexOf('nokia') >= 0) ? true : false
};
if (checker.android || checker.iphone || checker.blackberry || checker.nokia) {
$('#sthoverbuttons').hide();
}
Method 2:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$('#sthoverbuttons').hide();
}
Method 3:
if($(window).width() < 980)
{
$('#sthoverbuttons').hide();//this one works but i need to find devices and hide.
}
where the #sthoverbuttons is the container for the sharethis widget
And i also tried to remove the script sharethis script's when loading the webpage by assign id to the script tag's but that also not helps me.
So, How to hide the sharethis widget in handheld devices
2 answers
solution1
1 2013-01-11 05:44:07
You can do this with CSS3 media queries. Handheld devices generally are classified to be <600px wide, so adding something like this to your css file should solve your issue:
@media screen and (max-width: 599px){
#sthoverbuttons { display: none; }
}
solution2
0 2013-01-11 13:47:02
You could try CSS Browser Selector , a small javascript that writes in your <html> tag a bunch of classes targeting the current browser and OS, like this:
<html class="webkit chrome mac js">
meaning I'm on a Mac, using Chrome (Webkit engine), with javascript active.
One of the classes available in CSS Browser Selector is actually mobile , so you could target your buttons disregarding the media query on max-width that is not conclusive:
html.mobile #sthoverbuttons { display: none; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.