How do I prevent mobile devices from automatically downloading a PDF on my website?

Question

So I've got a part on my website where I show a pdf in an iframe. This works perfectly fine on computers. However, some mobile devices start downloading the pdf immediately when they load the website.

This is the code I use.

<div class="showbox" style="display: none;">
    <div class="embed-container">
        <iframe src="/images/pdf-file.pdf" style="border:none;"></iframe>
    </div>
</div>

So I just want the mobile users to be able to visit the website without automatically downloading the pdf.

Any ideas how to pull this off?

Answer 1

how about you use Responsive utility classes ?

take a look at: http://getbootstrap.com/2.3.2/scaffolding.html#responsive

scroll down untill "Responsive utility classes"

Answer 2

you can set your html like this:

<div class="showbox" style="display: none;">
    <div class="embed-container">
    </div>
</div>

and then put this js anywhere:

if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('.showbox .embed-container').append('<iframe src="/images/pdf-file.pdf" style="border:none;"></iframe>');
}