CSS print et le responsive

Bonjour,

Alors j'ai un petit problème pour l'impression de ma page web.
J'ai une page CSS en link media="print" sur ma page php.

J'utilise également bootstrap car ma page doit être responsive.

Code:

---

<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">

---

Cela permet donc que ma page s'adapte aux différents supports (ordi, smartphones, tablettes).

Quand je lance une impression (via un ordinateur) j'ai le même resultat qu'à l'écran sur google chrome.

Par contre (là est mon problème), sous IE et Firefox, l'impression ce fait comme si j'avais un rendu visuel sur smartphone (sa m'imprime sur 3 pages alors qu'il suffit d'une demi page pour google chrome)

Google chrome = impression du rendu ordinateur.
IE et Firefox = impression du rendu Smartphone.

J'aimerais que mon impression soit comme sur mon écran d'ordinateur pour IE et Firefox.

Est-il possible de faire disparaître l'effet de la balise ci-dessous via ma page CSS pour print, pour que le css responsive de bootstrap disparaisse pour l'impression ?

Code:

---

<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">

---

Avez vous une autre solution? Je ne vois pas quoi faire

Cordialement.

En utilisant l'attribut media à bon escient. ;)

Salut,

Merci pour l'indication.
Je suis en train de faire différents tests.

J'ai testé d'imprimer avec un media comme ça :

Code:

---

media="print and (min-width: 770px)"

---

Pour obliger l'impression à une taille minimum mais c'est pas trop ça :lol:

Je continu différents test sur l'attribut media.

Ah oui et c'est ce bout de code, ci-dessous, en css qui me permet de bien mettre en page l'impression sur google chrome (mais ne marche pas sur IE et FF et je n'ai pas trouvé un équivalent qui fonctionne sur ses 3 navigateurs)

Code:

---

1 2 3

@page { size: 1620px 1920px; }

---

Code:

---

media="print and (min-width: 770px)"

---

Je crois que tu n'as pas très bien saisi le concept... ou alors, tu as des feuilles de papier de moins de 770 pixels ! :aie:

Le responsive design (et les feuilles de styles le gérant) concernent l'affichage sur écran (media="screen"). Pour l'impression, il te faut une feuille de style spécifique aux particularités d'une mise en page sur papier, avec par exemple des unités en cm ou mm plutôt qu'en pixels...

oui, j'ai fait ma feuille de style spécifique

Dans ma page index.php:

Code:

---

<link href="css/cutters_rules_print.css" media="print" rel="stylesheet" type="text/css">

---

Ma page cutters_rules_print.css:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

/* Mise en forme CSS - Impression */   @media print {   @page { size: 40cm 46cm; }   #tool_result { border-top: 1px solid black; }   #gravo_logo { display: inline; margin-left: 50px; }   .recap_print { font-size: 12px; }   #header { display: none; }   #check { display: none; }   .check { display: none; }   #new_selection { display: none; }   .display_print { display: none; }   .image_result { display: none; }   footer { display: none; }   #printer { display: none; }   }

---

Je fais des display: none; pour tous les bloc que je ne veux pas voir à l'impression.

la ligne :

Code:

---

1 2 3

@page { size: 40cm 46cm; }

---

Me met bien en page comme je veux mon impression mais que sur Chrome (cela m'imprime comme je le vois à l'écran)
Mais ça ne fonctionne pas sur IE et FF (cela m'imprime comme je le verrais sur mon smartphone) du coup ce n'est pas bon, c'est moche et prend plusieurs feuilles.

Je comprends pas pourquoi :?