Implementé un html de asignación en mi servicio k8s, pero cuando abrí esta página en mi teléfono, descubrí que aún conserva el tamaño de la computadora y no puede funcionar con fluidez. Quiero saber cómo solucionar este problema.
índice.html
<body> <div class="container" style="display: flex;"> <h3>簽字</h3> <button onclick="reset()">清空</button> <button onclick="restore()">撤銷</button> <button onclick="upload()">上傳</button> <select class="selectColor" onchange="colorChange(event)"> <option value="black">黑色</option> <option value="red">紅色</option> <option value="blue">藍色</option> <option value="green">綠色</option> </select> </div> <div id='app'> <canvas id="canvas"></canvas> </div> </body> <script src="./plugin/canvas-sign.js"></script> <script> let cv = document.getElementById("canvas"); let rect = document.getElementById("app").getBoundingClientRect(); cv.width = rect.width; // console.log(app.getBoundingClientRect()); cv.height = rect.height; let canvas = new canvasSign(cv); let dataJson; canvas.on('drawend', (e) => { dataJson = canvas.toJson().dataJson; })Puedes intentar tener tus estilos como dinámicos:
let width=Dimensions.get('screen').widtho
let width=Dimensions.get('window').widthlo mismo pasa con la altura