Chrome瀏覽器忽略肖像上的CSS打印設置

我試圖根據portait或風景來控制打印HTML元素的佈局。以下是我在CSS設置中的內容。Chrome瀏覽器忽略肖像上的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位。

來源

2017-07-14 haijin

您是否嘗試過在您的css中設置頁面大小？

@page { 
    size: letter portrait; 
}

見https://www.w3.org/TR/css3-page/和https://www.w3.org/TR/css-gcpm-3/

來源

2017-07-14 19:22:03 WebGirl

感謝您的回覆。這個設置似乎對IE和Firefox沒有影響。在Chrome上，它將打印限制爲僅肖像模式。這不是我真正想要的。 – haijin

您可以將其更改爲橫向或a4或其他紙張尺寸。你有嘗試過嗎？ – WebGirl

我兩個星期前登錄票與Chrome，但從來沒有聽說過回。您可以強制Chrome瀏覽器以「A4風景」等其他紙張類型打印風景風格。默認的「美國信函」現在一直在打印人像樣式，最重要的是現在打印樣式大約爲750像素。這意味着如果您將移動樣式設置爲767px或更少，您將看到這些樣式應用於打印，而不是您打印時通常期望的桌面樣式。所以看起來Chrome對他們的打印進行了一些更新，可能會在很多網站上破壞現在的破壞。我不想強制紙張大小，所以我進行了調整，因此頁面仍然只能在肖像和767px css樣式應用環境下正常打印。

來源

2017-07-14 22:11:21 user3353523

你能否提供一些關於你的調整的細節？ – haijin

通過調整，我的意思是我需要期望移動樣式以Chrome和桌面樣式進行打印，以便在firefox/other中進行打印，並且只是爲了確保它看起來不錯。 Firefox等瀏覽器在打印橫向和桌面樣式時獲得了最佳的打印輸出。儘管在橫向上它仍然印有縱向和移動樣式，但Chrome瀏覽器仍然看起來不錯。（每個瀏覽器都希望在打印視圖中做他們自己的事情。） – user3353523

Chrome瀏覽器忽略肖像上的CSS打印設置

回答

相關問題