242

私は最近、Web サイトの印刷用スタイルシートに取り組んでいますが、それを微調整する効果的な方法が見つからないことに気付きました。オンスクリーン レイアウトで作業するためのリロード サイクルを設定することも 1 つの方法です。

  • コードを変更
  • コマンドタブ
  • リロード

しかし、印刷しようとすると、そのプロセス全体がはるかに困難になります。

  • コードを変更
  • コマンドタブ
  • リロード
  • 印刷する
  • 印刷プレビュー画像で目を細める
  • プレビューで PDF を開いてさらに詳しく調べる

ここで見逃しているツールはありますか? WebKit のインスペクターには、「これがページングされたメディアであるふりをする」チェックボックスがありますか? Firebug (身震い) ができる魔法はありますか?

4

13 に答える 13

330

Chrome のインスペクタには、そのためのオプションがあります。

  1. DevTools インスペクターを開きます (mac: Cmd+ Shift+ C、windows: Ctrl+ Shift+ C)
  2. DevTools パネルの左上隅にあるToggle device modeアイコンをクリックします。デバイス モードの切り替えボタン(Windows: Ctrl+ Shift+ M、Mac: Cmd+ Shift+ M)。
  3. ブラウザー ビューポートの右上隅にある[その他のオーバーライド] アイコンをクリックして、devtools ドロワーを開きます。 より多くのオーバーライド

  4. 次に、エミュレーション ドロワーで[メディア] を選択し、[ CSS メディア] チェックボックスをオンにします。

    ここに画像の説明を入力

これでうまくいくはずです。

更新: DevTools のメニューが変更されました。 右上隅の「3 つのドット」メニュー > [その他のツール] > [レンダリング設定] > [メディアのエミュレート] > [印刷] をクリックすると表示されます。

出典: Google DevTools ページ*

于 2013-01-18T13:55:39.697 に答える
76

HTMLからPDFへのアプローチを使用せずに、印刷されたウィンドウを可能な限り制御したいと仮定しています...デバッグには@media screenを使用します-最終的なcssには@media print

最新のブラウザーでは、@media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

ブラウザに「インチ」が表示されると、何が期待できるかがよくわかります。このアプローチは、印刷プレビューの方法をほぼ終了させる必要があります。すべてのプリンターはptおよびin単位で動作し、@media テクニックを使用すると、何が起こるかをすばやく確認して、それに応じて調整できます。Firebug (または同等のもの) は、そのプロセスを確実に促進します。@media に変更を追加すると、属性を使用してリンクされた CSS ファイルに必要なすべてのコードが得られmedia = "print"ます。@media スクリーン ルールを参照ファイルにコピー アンド ペーストするだけです。

幸運を。Web は印刷用に構築されたものではありません。すべてのコンテンツ、ブラウザで表示されるものと同等のスタイルを提供するソリューションを作成することは、場合によっては不可能な場合があります。たとえば、主に 1280 x 1024 のオーディエンス向けの流動的なレイアウトは、きれいできちんとした 8.5 x 11 のレーザー プリントに常に簡単に変換できるとは限りません。

purusal の W3C リファレンス: http://www.w3.org/TR/css3-mediaqueries/

于 2011-02-23T05:04:15.683 に答える
21

Chrome 48では、[レンダリング] タブ内で印刷スタイルをデバッグできます。

インスペクタの右上にあるメニュー アイコンと[レンダリング設定]をクリックします。

編集Chrome 58
の 場合、場所が[Web インスペクタ] > [メニュー] > [その他のツール] > [レンダリング]に変更されました

于 2016-02-03T17:04:54.217 に答える
16

HTMLコードでメディア属性を切り替えることなく、印刷スタイルシートをデバッグする簡単な方法があります（もちろん、指摘したように、幅/ページの問題は解決しません）：

  • Firefox + Web Developer 拡張機能を使用します。
  • Web 開発者メニューで、CSS / Display CSS by Media Type / Print を選択します。
  • Web Developer メニューに戻り、Options / Persist Features を選択します。

これで印刷 CSS が表示され、ページを無期限にリロードできます。完了したら、「Persist Features」のチェックを外してリロードすると、画面 CSS が再び取得されます。

HTH。

于 2011-02-28T20:46:43.947 に答える
5

media="screen"デバッグ中に使用して、ブラウザーで印刷スタイルシートを表示するだけです。印刷プレビュー ビューは、通常のブラウジング モードと同じレンダリング エンジンを使用するため、それを使用して正確な結果を得ることができます。

于 2010-03-16T07:44:35.820 に答える
4

2019 - 手順の更新

  1. Chrome インスペクタを開く
    • Macから=> option+ command+i
    • Windowsから=>F12

  2. 小さな 3 つの点をクリックし、customize and control devTools ここに画像の説明を入力

  3. 選択するMore Tools

  4. 選択するRendering

  5. 一番下までスクロールしてEmulate CSS Media

  6. print下矢印から選択

ここに画像の説明を入力

于 2019-08-20T17:28:52.603 に答える
0

印刷スタイル シートを参照して、ページのコンテンツを新しいウィンドウに書き換える印刷機能がある場合は、紙の上でどのように見えるかをよりよく理解でき、デバッグすることができます。ファイアーバグのようなものも。

JavaScript / jqueryでこれを行う方法の例を次に示します

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });
于 2011-02-28T11:32:13.350 に答える
-1

ここに画像の説明を入力

DreamWeaver には、スクリーン、印刷、ハンドヘルド メディア、プロジェクション スクリーン、テレビ メディア、デザイン タイム スタイル シートなど、ほぼすべてのレンダリング オプションを表示するツールバーがあります。ボタンを 1 回押すだけです。

于 2011-03-01T16:41:32.827 に答える
-7

マクロを使用して、キープレスとマウス クリックを繰り返し送信します。Windows では AutoHotKey は優れたソフトウェアであり、OS X では Automator のようなOsX の代替 AHKについて読むことができます。

Windows では (OS X では Ctrl を Cmd に置き換えます) "Ctrl-s / 開いているウィンドウのリストにある Fx ウィンドウに切り替える / Ctrl-r" を 1 つの未使用のキーにバインドすると、興味のないタスクによるフラストレーションが回避され、最終的に私の腕が救われます。RSIから:)

于 2011-02-28T19:30:39.497 に答える