クロムはポートレートまたはランドスケープに応じてHTML要素の印刷のレイアウトを制御しようとしています。ポートレートまたはランドスケープに応じて、CSSの印刷設定を無視します。

Question

ここで私はCSSの設定で何を入れます。

@media print and (orientation: landscape){ 
    /* Your code for portrait landscape */ 

    #reactView{ 
    /*chrome seems only look at this data*/ 
    height: 7in !important; 
    } 

@media print and (orientation: portrait){ 
    /* Your code for portrait landscape */ 

    #reactView{ 
    height: 10in !important; 
    } 
} 

設定はIE、Firefoxでうまくいきます。しかし、Chromeでは、ポートレートの設定が機能していません。肖像画で私は7インチも持っています。

Chromeのバグですか？回避策はありますか？ありがとう。

Chrome 60,64ビットを使用しています。

Answer 1

あなたのCSSでページサイズを設定しようとしましたか？

@page { 
    size: letter portrait; 
} 

私は2週間前にChromeでチケットを記録したが戻って聞いたことがないhttps://www.w3.org/TR/css3-page/とhttps://www.w3.org/TR/css-gcpm-3/

Answer 2

を参照してください。あなたは、 "A4ランドスケープ"のような他のいくつかの用紙タイプで、景色を印刷するためにChromeを強制することができます。既定の "US Letter"は、今では常にポートレートスタイルを印刷しています。その上に、今では約750ピクセルでスタイルを印刷しています。つまり、767px程度に設定されたモバイルスタイルを使用している場合は、印刷中に通常想定されるデスクトップスタイルではなく、印刷スタイルにスタイルが適用されます。だから、Chromeは印刷物にいくつかの更新を加えたようで、おそらく多くのウェブサイトで大混乱を引き起こしているようです。私は用紙サイズを強制的にしたくないので、調整して、ページがまだ肖像画のみで、767px CSSスタイルが適用された環境下で印刷されるようにしました。