Tengo el siguiente código, el problema es que la implementación es como si los siguientes elementos generados entraran en un div que tiene un ancho fijo de 1100, usando mui por cierto, al crear el pdf en el escritorio, los resultados son los que deberían ser, sin embargo, al crear el pdf desde el teléfono móvil el ancho del pdf creado es pequeño, podría decir que solo se muestran 400 de los 1100 div, cuando se crea desde Chrome responsive funciona como debería, cómo cuáles son las opciones correctas para hacer que jspdf creó un pdf con el ancho correcto Creo que jsPdf está confundiendo el tamaño de la pantalla del iPhone.
html2canvas( document.getElementById('pdfItems')!, { onclone: function (clonedDoc) { // none ! hidden show !! clonedDoc.getElementById('pdfItems')!.style.display = 'flex'; }, // TO INCREASE QUALITY !!!!!!!!!! scale: /*3*/ 2, //width: document.getElementById('pdfItems')!.clientWidth, } /* { allowTaint: false, width: window.innerWidth, height: window.innerHeight, scrollX: window.pageXOffset, scrollY: window.pageYOffset, x: window.pageXOffset, y: window.pageYOffset, imageTimeout: 1500, }*/ ).then((canvas) => { //document.body.appendChild(canvas); // if you want see your screenshot in body. const imgData = canvas.toDataURL('image/png'); //A4 var imgWidth = 210; //var pageHeight = 295; var imgHeight = (canvas.height * imgWidth) / canvas.width; //var heightLeft = imgHeight; // A4 var doc = new jsPDF('p', 'mm' /*pt*/, 'a4', true); doc.addPage([imgWidth, imgHeight]); doc.addImage(imgData, 'PNG', 0,0 , imgWidth, imgHeight); doc.deletePage(1); const fileName = 'test' doc.save(`${fileName}.pdf`); }); }; // PDF DIV STYLE <div id='pdfItems' style={{ display: 'flex', flexDirection: 'column', margin: 0, padding: 0, textAlign: 'center', width: 1100, }} > // Itemes </div>