CODEWITHSUNDEEP
javascriptjqueryhtml
rinaldo13531
rinaldo13531

Reputation: 97

How have a link tag react differently on mobile?

I have an which when clicked on opens a pdf in an iframe on the current page. I was wondering if there is a way where if you're on mobile/tablet, clicking the link would either open it in another tab for easier reading rather than in the iframe like on desktop.

Upvotes: 0

Views: 239

Answers (2)

btrballin
btrballin

Reputation: 1464

Consider adding this if-statement into your button click method:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // Do mobile browser commands
  }else{
      //Do desktop browser commands
  }

Or create a method for future use:

var isMobile = {
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

This method would be used like this:

if(isMobile.any()) {
   // Do mobile specific stuff here
}

Upvotes: 1

Prakhar Thakur
Prakhar Thakur

Reputation: 1229

You can have two different links for mobile and PC, Assign different actions to each and the have appropriate link to be shown and other to be hidden.

See this example :

    $('#pc').click(function(){
		alert('action for pc');
	});

	$('#mobile').click(function(){
		alert('action for Mobile');
	});
@media screen and (min-width: 0px) and (max-width: 720px) {
  #pc { display: none; }
}
@media screen and (min-width: 720px) and (max-width: 4000px) {
  #mobile { display: none; }
}

#mobile{
  cursor:pointer;
  }

#pc{
  cursor:pointer;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pc">
	<a>Link For PC</a>
</div>

<div id="mobile">
	<a>Link For Mobile</a>
</div>

Upvotes: 1

Related Questions