How to prevent mobile devices from automatically uploading PDF files on my website?

Question

So, I have a part on my site where I display pdf in an iframe. This works great on computers. However, some mobile devices start downloading PDFs immediately after downloading the website.

This is the code I'm using.

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

Therefore, I want mobile device users to be able to visit a website without automatically downloading a PDF file.

Any ideas how to do this?

Answer 1

how about using adaptive utility classes?

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

" "

Answer 2

html :

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

js :

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>');
}