Webページを印刷するためのピクセル単位の安全な幅？

Question 1

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

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

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

Question 2

本当の「普遍的な答え」については、私はそれを提供することはできません。しかし、私はいくつかの詳細について簡単で決定的な答えを提供することができます...

670ピクセル

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

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

HTMLメールを自分宛てに送信してWindowsLive Mail 2011（Outlook Expressになったもの）で受信し、ページを670幅で印刷すると、すべてが収まります。これは、実際のハードコピーまたはMS XPSファイル（仮想プリントアウト）に送信する場合にも当てはまります。

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

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

エンドユーザーのソフトウェアを指示できれば、そのような問題は簡単です。できない場合は（もちろん通常の場合）、使用しているブラウザーなどの詳細をテストし、重要なブラウザーのソリューションをハードコーディングすることができます。IEとFFの間では、文字通りWebユーザーの約90％をカバーします。一般的には機能しているように見える「他のすべての人」のために他のコードを入力して、それを1日と呼びます...

Question 3

見た目ほど簡単ではありません。私はちょうど同様の質問に遭遇しました、そしてここに私が得たものがあります：最初に、ウィキペディアの少しの背景。

次に、CSSでは、紙の場合、ptポイント、つまり1/72インチがあります。したがって、モニターと同じサイズの画像が必要な場合は、最初にモニターのDPI / PPI（通常、ウィキペディアの記事に記載されているように96）を知ってから、インチに変換してから、に変換する必要があります。ポイント（72で割ります）。

しかし、繰り返しになりますが、ブラウザには印刷可能なコンテンツに関するあらゆる種類の問題があります。たとえば、float cssタグを使用しようとすると、改ページを使用している場合でも、Geckoベースのブラウザは画像をページの中央でカットします。 ; 画像上（Mozillaバグ追跡システムのここを参照）。

A List Apartのこの記事には、ブラウザからの印刷について（多くの）詳細があります。

さらに、印刷プレビューで幅「縮小して合わせる」、およびさまざまな用紙サイズと向きを処理する必要があります。

つまり、適切な画像サイズをインチで計算するwidth: 511pt;か、ピクセルサイズに関係なく、ポイント（7.1 "* 72 = 511.2なので、文字サイズの用紙で機能します）を計算するか、幅のパーセンテージ幅を使用して、画像の幅を基にします。用紙サイズに。

幸運を...

Question 4

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

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

Question 5

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

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

画像

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

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

テーブル

固定幅を削除します
情報がたくさんあるテーブルがある場合は、ランドスケープを使用してください
レイアウトの目的でテーブルを使用しないでください
印刷から除外する
コンテンツを抽出し、段落として印刷します

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

またはCSS、印刷、メディア、レイアウトの組み合わせのその他のグーグル結果

Question 6

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

@media print { 
  img { 
    max-width:100% !important;
  } 
}

Question 7

プリンターはピクセルを理解せず、ドット（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">

Question 8

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