Minimum and maximum zoom properties

The Syncfusion® PDF Viewer lets developers control zoom limits for every document view. Configure the minZoom and maxZoom properties to prevent users from zooming beyond the range that keeps content legible and maintains predictable performance.

minZoom

Use the minZoom property to define the lowest zoom percentage that the viewer allows. Setting an appropriate minimum avoids unreadable pages when users zoom out. Assign the value that matches the smallest acceptable scale for the application, and keep it lower than or equal to maxZoom.

maxZoom

Use the maxZoom property to cap the highest zoom percentage. Limiting the upper bound prevents excessive magnification that can slow rendering or introduce scrolling issues. Choose a value that balances detail visibility with responsiveness.

@{
    ViewBag.Title = "Home Page";
    double maxZoom = 200;
    double minZoom = 20;
}

<div>
    <div style="height:100%; width: 100%;">
        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("PDF_Succinctly.pdf").MaxZoom(maxZoom).MinZoom(minZoom).Render()
    </div>
</div>

Restrict zoom percentage on mobile devices

You can restrict zoom percentages on mobile devices by updating the minZoom and maxZoom properties when the document load event fires. This ensures smoother scrolling performance and consistent page rendering on smaller screens. Attach the handler by wiring the documentLoad event to the documentLoad function in the PDF Viewer markup or initialization script.

<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentLoad("documentLoad").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

<script>
    function documentLoad() {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        if (ej2_base_1.Browser.isDevice && !viewer.enableDesktopMode) {
            viewer.maxZoom = 200;
            viewer.minZoom = 10;
        }
       else {
            viewer.zoomMode = 'Default';
        }
    }
</script>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentLoad("documentLoad").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

<script>
    function documentLoad() {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        if (ej2_base_1.Browser.isDevice && !viewer.enableDesktopMode) {
            viewer.maxZoom = 200;
            viewer.minZoom = 10;
        }
       else {
            viewer.zoomMode = 'Default';
        }
    }
</script>

When configuring zoom limits, keep minZoom less than or equal to maxZoom, and adjust the values to meet accessibility expectations across desktop and mobile experiences. Review the zoomMode property if you need additional control over how the viewer interprets zoom operations.