Page HTML affichage mobile et tablettes

CedNad8 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   -  
cyril1982 Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous, et merci de vous être arrêté sur mon post !

Récemment, j'ai créé une page web perso avec Notepad++.
Tout marche impeccable, et j'ai réussi à avoir un affichage correct sur des écrans allants de 13 pouces à 17 pouces.
En revanche, dès que le site est ouvert sur Smartphone ou tablette, il me manque au moins 5cm à droite de la page...

Pouvez vous m'aider, car j'ai essayé de me renseigner sur le responsive Webdesign..., mais mes connaissances sont très faible en HTML et je ne pompe rien... !!

La page est simple, elle est constituée :
- d'une photo en background
- d'une image (en haut à gauche) qui permet de télécharger un docx lorsqu'on clique dessus.
- d'un fichier pdf qui est affiché (légèrement sur la droite)

Voici mon codage : 

<!DOCTYPE html> 

<html> 

<head> 

<title>MON_TITRE</title> 

<style type="text/css"> 

body { 
background-image:url("MON_BACKGROUND.jpg"); 
heigth:100%; 
background-size:cover; 
} 

#monpdf { 
position: relative; 
left: 35%; 
width:667px; 
height:550px; 
} 

</style> 

</head> 

<body> 

<a href="MON_FICHIER_A_TELECHARGER.docx"> 
<img src="MON_IMAGE.jpg"> </a> 

<div id="monpdf"> 
<iframe src="MON PDF.pdf" width="667px" height="535px"></iframe> 
</div> 

</body> 

</html>
A voir également:

1 réponse

Réponse 1 / 1
cyril1982 Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   12
 
Bonjour,

Les largeurs sont exprimées en pixel dans ta page.
Tu pourrais commencer par les exprimer en % car avec des largeurs de 667px cela ne passera jamais sur un smartphone.

Mais pour obtenir un rendu adapté aux smartphones, il faudra utiliser les media queries afin de définir un rendu selon la taille de l'écran. Exemple : 

//Affichage standard
#monpdf
{ 
  position: relative; 
  left: 35%; 
  width:667px; 
  height:550px; 
} 

#monpdf iframe
{
  width:667px; 
}

//Affichage pour smartphone et tablette (On utilise 100% de la largeur pour que cela soit lisible)
@media (max-width: 860px) {
  #monpdf
  { 
    width:100%;  
  } 
  #monpdf iframe
  {
    width:100%; 
  }
}

Voici un lien intéressant sur les media queries :
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Bon courage
0

Discussions similaires

Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses
Retrouver mes factures réglo mobile
Conde -
Mlv2a -

7 réponses
demande de facturation de ma ligne reglo mobile depuis le 1er à
odile -
Utilisateur anonyme -

1 réponse