Affichage pdf avec navigateurs différents

**Berchan** · 21/03/2017, 14h13

Bonjour,

voici le code utilisé pour affichage de fichier pdf :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<object id="pdf" type="application/pdf" data="2017_inscription_6eme_festival.pdf" >
</object>

css pour id="pdf" :

- pour les sites PC

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#pdf
{
 width:875px;
 height:1100px;
margin: 0 auto;   
border-radius: 8px;
border: 1px solid #101;
}

-pour mobile

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
@media all and (max-width: 1024px)
{
 
 #pdf
    {
        width:430px !important;
        height:600px;
        margin: 0 auto;   
        border-radius: 8px;
        border: 1px solid #101;
    }
 
}

Tout se passe bien pour les navigateurs pc ( après avoir utilisé comme doctype des pages :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

sinon chrome et d'autres navigateur n'ouvrait pas le pdf)

mais avec les mobiles :

-soit j'ai un ensemble blanc à la place du pdf

-soit j'ai la mention plug-in incompatible

Y-a-t-il une solution ? quel ajout pour les mobiles faut-il placer dans mon code ?

NB.Est-il bien utile d'utiliser ce doctype au lieu du simple <!doctype html> ?

Merci

En plus :

je viens de constater qu'avec Edge l'Api pdf est incomplète : le corps du document s'affiche mais les possibilités d'affichage, impression, téléchargement etc .. sont absents.

Cordialement.

**Vil'Coyote** · 22/03/2017, 14h52

le seul moyen de lire correctement un pdf sur du multi plateforme c'est d'utiliser un lecteur type google docs dans la page. le fait de mettre tes balises incite le système a prendre l'appli par défaut et comme tu le constate sur les mobile par défaut y a pas grand chose.

**Berchan** · 22/03/2017, 19h17

Bonsoir,
merci pour le conseil. Mais ... comment faire pour "obliger" le mobile à utiliser ce type de lecteur ?
Cordialement.

**Berchan** · 23/03/2017, 19h08

Bonsoir,
j'ai résolu le problème : j'ai converti mes pdf en page jpg pour l'affichage et je propose un téléchargement du pdf !
Ainsi sur les mobiles le jpg s'affiche sans problème ! Voici un bout du code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section>
			<h1 class="police2"></h1>
			<article>						
				<h3 class="police">Compte-rendu du festival 2017 de Clermont-Ferrand</h3>
				<h5><a href="gazetteclermont2017.pdf" download="gazetteclermont2017.pdf">Télécharger le document complet au format ".pdf"</a></h5>
				<h5>Page 1</h5>
					<object id="pdf" data="gazetteclermont2017_1.jpg" >
					</object>	
				<h5>Page 2</h5>
					<object id="pdf" data="gazetteclermont2017_2.jpg" >
					</object>		
				<h5>Page 2</h5>
					<object id="pdf" data="gazetteclermont2017_3.jpg" >
					</object>
			</article>
		</section>

**Berchan** · 23/03/2017, 19h11

re,
une petite erreur dans le code : il ya 2 pages 2 : j'ai corrigé !
Nb. Avant de "classer" la discussion, j'attends un conseil, une amélioration possible.

Affichage pdf avec navigateurs différents

Conception Web

Vue hybride

Discussions similaires

Partager

Partager