How to use Virtual Viewport and Zoom
In HTML to PDF rendering, the viewport plays a vital role in determining how the layout of the web page will be captured in the resulting PDF document. Specifically, it refers to the virtual screen size that the browser should render the web page into.
Zoom, within the context of HTML to PDF rendering, governs the scaling of web page content in the PDF document. The ability to fine-tune the zoom level provides a means to adjust the size of the content in the resulting PDF, ensuring it aligns with your desired layout and formatting.
How to use Virtual Viewport and Zoom
Install with NuGet
Install-Package IronPdf
Download DLL
Manually install into your project
Install with NuGet
Install-Package IronPdf
Download DLL
Manually install into your project
Start using IronPDF in your project today with a free trial.
Check out IronPDF on Nuget for quick installation and deployment. With over 8 million downloads, it's transforming PDF with C#.
Install-Package IronPdf
Consider installing the IronPDF DLL directly. Download and manually install it for your project or GAC form: IronPdf.zip
Manually install into your project
Download DLLPaper Fit Modes
Access the PaperFit field in RenderingOptions to invoke a preset method that can be used for a specific rendering type and mode. Let's examine each PaperFit mode in more detail by rendering the well-known Wikipedia page for comparison.
Chrome Default Rendering
Lays out PDF pages in the same way as they appear in Google Chrome's print preview. This method configures the rendering options to mimic the appearance of a web page when printed from Google Chrome's print preview. The responsive CSS viewport for the specified paper size is interpreted based on the width of that paper size. Use the UseChromeDefaultRendering
method to configure this.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-default-chrome.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering();
// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");
pdf.SaveAs("chromeDefault.pdf");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering()
' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")
pdf.SaveAs("chromeDefault.pdf")
Responsive CSS Rendering
In responsive CSS mode, you can specify a viewport width by passing a value to the UseResponsiveCssRendering
method. The default viewport width is 1280 pixels. As you may have noticed, the viewport unit is pixel-based, representing a virtual browser viewport for responsive CSS designs.
Responsive CSS is used to define the rendering of HTML based on the ViewPortWidth parameter, scaling the content to fit the width of the specified paper size.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-responsive-css.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280);
// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");
pdf.SaveAs("responsiveCss.pdf");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280)
' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")
pdf.SaveAs("responsiveCss.pdf")
Scaled Rendering
The UseScaledRendering
method adopts a layout that mimics the behavior of 'Chrome Print Preview' for a specified paper size. It also provides an additional zoom level that developers can manually adjust. This method enables the option to scale the content according to the input zoom percentage.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-scaled.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180);
// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");
pdf.SaveAs("scaled.pdf");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180)
' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")
pdf.SaveAs("scaled.pdf")
Fit to Page Rendering
Conversely, 'fit to page' rendering scales content to fit the specified paper size. It measures the minimum HTML content width after rendering and scales it to fit the width of one sheet of paper where possible. The configurable minimum pixel width is used as a pixel-based minimum width for the document to ensure correct display and responsiveness to CSS3 layout rules.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-fit-to-page.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering();
// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");
pdf.SaveAs("fitToPage.pdf");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering()
' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")
pdf.SaveAs("fitToPage.pdf")
Continuous Feed Rendering
Continuous feed rendering creates a single-page PDF that enforces the entire content's width and height to fit onto one page, making it suitable for documents like consumer bills or receipts. The default width for the PDF page is 80.0 millimeters, and the default margin is 5 millimeters.
The ability to customize the page width and margin using the 'width' and 'margin' parameters provides flexibility, making it a convenient choice for creating concise, single-page documents.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-continuous-feed.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering();
// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");
pdf.SaveAs("continuousFeed.pdf");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering()
' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")
pdf.SaveAs("continuousFeed.pdf")