1. IronPDF
  2. Guías
  3. Ajustar al Papel y Zoom
Cómo usar la vista virtual y el zoom en C#

How to use Virtual Viewport and Zoom

Curtis Chau
Curtis Chau
Actualizado:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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.

Quickstart: Control Zoom and Viewport with IronPDF

Learn how to effortlessly manage zoom and viewport settings in your HTML to PDF conversions using IronPDF. This quick guide provides a simple code snippet to get you started with scaling HTML content. With just a few lines of code, you can ensure your PDFs are perfectly rendered, maintaining responsive design elements and desired layouts. Experience the ease of IronPDF's powerful rendering options today.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { ViewPortWidth = 1280, Zoom = 1.8 } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("zoomedViewport.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

Minimal Workflow (5 steps)

  1. Download the IronPDF C# library for PDF rendering and viewport control
  2. Render HTML to PDF using different preconfigured modes
  3. Use the Chrome default and responsive CSS modes to achieve automatic layout in PDF
  4. Utilize scaling to zoom the content
  5. Configure 'fit to page' and 'continuous feed' for specific use cases


Paper 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")
$vbLabelText   $csharpLabel

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")
$vbLabelText   $csharpLabel

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")
$vbLabelText   $csharpLabel

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")
$vbLabelText   $csharpLabel

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. Let's render the 'receipt.html' file to PDF.

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();

int width = 90;
int margin = 0;

// Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("receipt.html");

pdf.SaveAs("continuousFeed.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

Private width As Integer = 90
Private margin As Integer = 0

' Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("receipt.html")

pdf.SaveAs("continuousFeed.pdf")
$vbLabelText   $csharpLabel

Ready to see what else you can do? Check out our tutorial page here: Convert PDFs

Preguntas Frecuentes

¿Cómo puedo renderizar HTML a PDF con estilo CSS responsivo?

Puedes usar IronPDF para renderizar HTML con estilo CSS responsivo aprovechando su capacidad para soportar bootstrap y otros frameworks CSS, asegurando que el contenido de tu página web se capture de manera precisa en el PDF.

¿Cuál es la importancia del viewport en la conversión de HTML a PDF?

El viewport es crucial en la conversión de HTML a PDF ya que define el tamaño de pantalla virtual que el navegador usa para renderizar la página, impactando directamente en cómo el diseño y maquetación se capturan en el PDF.

¿Cómo ajusto el nivel de zoom al convertir HTML a PDF?

Con IronPDF, puedes ajustar el nivel de zoom especificando un factor de escala, lo cual te permite controlar el tamaño del contenido en el PDF para que coincida con el diseño y presentación deseados.

¿Qué es la característica de Renderizado Predeterminado de Chrome en IronPDF?

El Renderizado Predeterminado de Chrome en IronPDF simula la apariencia de una página web tal como se ve en la vista previa de impresión de Google Chrome, usando CSS responsivo para ajustar el contenido al tamaño de papel especificado.

¿Cómo funciona el Renderizado CSS Responsivo al generar PDFs?

El Renderizado CSS Responsivo en IronPDF te permite especificar un ancho de viewport, escalando el contenido HTML para que se ajuste al tamaño del papel. Por defecto, el ancho del viewport se establece en 1280 píxeles, asegurando que el contenido se ajuste bien dentro de las dimensiones del PDF.

¿Puedo usar el Renderizado Escalado para ajustes de zoom personalizados?

Sí, el Renderizado Escalado en IronPDF permite a los desarrolladores ajustar el nivel de zoom especificando un porcentaje, habilitando el control preciso sobre la escala del contenido de la página web en el PDF.

¿Cuál es el beneficio de 'Ajustar al tamaño de página' en la generación de PDF?

El 'Ajustar al tamaño de página' en IronPDF escala el contenido para que se ajuste al tamaño de papel elegido, asegurando que se mantenga un ancho mínimo de píxeles, lo cual es clave para lograr una visualización y consistencia de maquetación apropiadas.

¿Cómo difiere la Renderización de Alimentación Continua de otros modos de renderización?

La Renderización de Alimentación Continua en IronPDF crea un PDF de una sola página que acomoda el ancho y alto completo del contenido, lo que lo hace ideal para documentos como facturas de consumidor o recibos donde el contenido de página completa es necesario.

¿IronPDF es totalmente compatible con .NET 10, especialmente con los controles de ventana gráfica y zoom?

Sí, IronPDF es totalmente compatible con .NET 10. Admite todas las opciones de renderizado de la ventana gráfica y el zoom (por ejemplo, configuración de ViewPortWidth, uso de escalado de zoom y CSS adaptable) directamente en entornos .NET 10 sin necesidad de configuración adicional. ([ironpdf.com](https://ironpdf.com/blog/net-help/net-10-features/?utm_source=openai))

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 16,154,058 | Versión: 2025.11 recién lanzado