87

Webページを印刷するための安全なピクセル幅はどれくらいですか？

私のページには大きな画像が含まれているので、印刷時に画像が切り取られないようにしたいと思います。

さまざまなブラウザの余白とUSレター/DINA4用紙サイズについて知っています。そのため、標準の文字サイズといくつかのデフォルトのDPI値を取得しました。しかし、これらをピクセル値に変換して、画像のwidth属性で指定することはできますか？

4

7 に答える 7

89

本当の「普遍的な答え」については、私には答えられません。ただし、いくつかの詳細については、シンプルで決定的な答えを提供できます...

670ピクセル

少なくとも、これはマイクロソフト製品にとって安全な答えのようです。675 を含む多くの提案を読みましたが、これを自分でテストした後、670 を思いつきました。

すべての DPI、余白の問題、ハードウェアの違いは別として、この回答は、IE9 で印刷プレビューを使用する場合 (標準の余白を使用)、デフォルトの「縮小して合わせる」ではなく、印刷サイズを 100% に設定するという事実に基づいています。 、この幅で途切れることなくすべてがページに収まります。

自分自身に HTML メールを送信し、Windows Live メール 2011 (Outlook Express になったもの) で受信し、ページを 670 幅で印刷すると、すべてが収まります。これは、実際のハード コピーまたは MS XPS ファイル (仮想印刷) に送信する場合にも当てはまります。

実験する前は、任意の幅 700 を使用していました。上記のすべてのシナリオで、ページの一部が切り取られていました。670 に縮小すると、すべてが完全に収まりました。

幅の設定方法については、プリミティブな「ラッパー」html テーブルを使用して、幅を 670 に定義しました。

エンド ユーザーのソフトウェアを指示できる場合、そのような問題は簡単に解決できます。それができない場合 (もちろん通常の場合)、使用しているブラウザーなどの詳細をテストし、重要な解決策をハードコードすることができます。IE と FF の間で、文字通り Web ユーザーの約 90% をカバーします。「他のすべての人」のために他のコードを入れてください。これは一般的に機能しているようで、1日と呼びます

于 2012-06-18T14:18:41.267 に答える
20

私が見つけた問題の解決策の 1 つは、幅をインチ単位で設定することでした。これまでのところ、これが Chrome で動作することをテスト/確認しただけです。私が使っていたものにはうまくいきました（8.5 x 11のシートを印刷するため）

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}
于 2013-11-09T22:54:44.400 に答える
10

印刷の場合、幅を設定せず、印刷レイアウトが動的な幅になるのを妨げる障害を取り除きます。つまり、ブラウザー ウィンドウをどんどん小さくしても、コンテンツが切り取られたり隠されたりすることはありませんが、ドキュメントが長くなるだけです。このように、残りはプリンター/pdf-creator によって確実に処理されます。

画像や表など、幅が固定されている要素はどうでしょうか?

画像

私が考えることができるオプション：

  • どのような場合にも収まると想定できる幅に、印刷 CSS で画像を縮小します。px ではなく pt を使用します (ただし、印刷にはより多くのポイント/ユニットが必要になるため、これはほとんど問題になりません)。
  • 印刷から除外

テーブル

  • 固定幅を削除
  • 大量の情報を含むテーブルが実際にある場合は、横向きを使用してください
  • レイアウト目的でテーブルを使用しないでください
  • 印刷から除外
  • コンテンツを抽出し、段落として印刷する

http://www.intensivstation.ch/en/css/print/

または、CSS、印刷、メディア、レイアウトの組み合わせに関するその他の Google 検索結果

于 2008-11-26T11:34:16.470 に答える
5

Web ページに印刷するときに画像が切れないようにするための解決策は、次の CSS ルールを使用することです。

@media print { 
  img { 
    max-width:100% !important;
  } 
}
于 2011-02-23T14:24:59.620 に答える
4

プリンターはピクセルを理解せず、ドット (CSS の pt) を理解します。最良の解決策は、印刷用に追加の CSS を作成し、すべての単位をドットで表すことです。

次に、HTML コードの head セクションに次のように記述します。

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
于 2008-11-26T11:55:32.057 に答える
0

あるとは思えません...ブラウザ、プリンター（物理最大dpi）とそのドライバー、ご指摘の用紙サイズ（B5用紙にも印刷したいかもしれません...）、設定（横向きか縦向きか?)、さらに、多くの場合、スケール (パーセンテージ) などを変更でき
ます。ユーザーに設定を微調整させてください...

于 2008-11-26T11:32:57.453 に答える