【发布时间】：2022-09-27 10:34:46
【问题描述】：
简而言之，我有一个具有动态变化宽度的画布，它不会发生太大变化，其默认大小为 400x550。它显示图像并提供用于打印图像的 UI。在桌面上它看起来很棒，但在移动设备上它会在容器的空白之外绘制画布，并且想知道是否有办法修复它。
<div class=\"container pt-4\" id=\"mainUI\" style=\"margin-top: 5%; background-color: #EEEEEE;\">
<div class=\"row\">
<div class=\"colmatt
<div class=\"card-deck\">
<div class=\"card mb-4\">
<div class=\"card-body\">
<h1>Print</h1>
<p class=\"card-text font-weight-bold\">
Supported File Types (CGM, PDF, PS, SVG, DWG, TIF, PNG, JPG, BMP, GIF)
</p>
<!--Choose file -->
<div class=\"input-default-wrapper span-browse\">
<input type=\"file\" id=\"upload\" name=\"filetoupload\" class=\"input-default-js btn btn-primary\" onChange=\"sendFile();\" />
</div>
<form method=\"POST\" action=\"/fileUpload\"
enctype=\"multipart/form-data\" id=\"fileUploadForm\">
<div class=\"form-row mb-1\">
</div>
<div class=\"file_upload\" id=\"file-upload\"
style=\"display:none;\">
<span class=\"blink_text\">Uploading File. This can take a
few minute...</span>
</div>
<div class=\"file-data\" id=\"file-ident\"
style=\"display:none;\">
<b style=\"font-size: medium;\" class=\"form-
label\">Printer:
</b>
<col-10>
<select class=\"custom-select custom-select-sm\"
name=\"selectedPrinter\" id=\"selectedPrinter\"
onchange=\"SetPaper(), drawPaper();\">
<option value=\"1\" selected>HP Laserjet
6i</option>
<option value=\"2\">Canon TX 7100</option>
</select>
</col>
<div class=\"form-row mb-1\">
<b for=\"MediaSize\" style=\"font-size: medium;\"
margin: auto; class=\"form-label\">Paper:
</b>
<div class=\"col-4\">
<select class=\"custom-select custom-select-sm\"
id=\"MediaSize\"
onChange=\"drawPaper(jsonObj);\">
<option value=\"36 inch Roll\" selected>36
inch Roll</option>
<option value=\"24 inch Roll\">36 inch
Roll</option>
</select>
</div>
</div>
<div class=\"row\">
<input id=\"filename\" type=\"text\" value=\"\"
class=\"form-control\" name=\"filename\" style=\" display:none;\">
<input id=\"oname\" type=\"text\" value=\"\" class=\"form-
control\" name=\"oname\" style=\" display:none;\">
<div class=\"col-6 my-2col-6 my-2 \">
<div class=\"card-deck text-left my-2\">
<div class=\"card box-shadow\">
<div class=\"card-header\">
<h6 class=\"my-0 font-weight-
bold\">File Properties</h6>
</div>
<div class=\"card-body\">
<ul class=\"list-unstyled\">
<li class=\"col text-left font-
weight-bold\" id=\"ident\"></li>
<li class=\"col text-left\"
id=\"dimensions\"></li>
<li class=\"col text-left\"
id=\"resolution\"></li>
<li class=\"col text-left\"
id=\"pages\"></li>
<li class=\"col text-left\"
id=\"filename\" style=\" display:none;\"></li>
</ul>
</div>
</div>
</div>
</div>
<div class=\"col-2 \" id=\"file-\">
<canvas class=\"cgm\" id=\"pvCanvas\" width=\"400\"
height=\"550\"
style=\"position: static; background: transparent;
left: 0; right: 0; margin: auto; z-index: 1; margin-top: 0px; margin-bottom: -10px;
border:
1px solid #000000; \"></canvas>
<div class=\"form-row\">
<canvas class=\"canvas\" id=\"canvas1\" width=\"400\"
height=\"30\"
style=\"position: static; background:
transparent; left: 0; right: 0; ; z-index: 1; margin-left: 5px; margin-top: 2px;
border:
1px solid #000000; \"></canvas>
</div>
</div>
</div>
</div>
<!--This section is data specific, the ID of each DIV is the
filetype -->
<div class=\"file-data\" id=\"file-common\">
<h4 class=\"mt-4\">Print Options</h4>
<div class=\"row\">
<div class=\"col-3\">
<div class=\"input-group\">
<label class=\"input-group-addon\">Scale(%)
</label>
<input id=\"ScaleFactor\" type=\"number\"
step=\"any\" value=\"100\" class=\"form-control\" onchange=\"scaleF()\" name=\"Scale\">
</div>
</div>
<div class=\"col-3\">
<div class=\"input-group\">
<label for=\"mode\" class=\"input-group-
addon\">Color</label>
<select class=\"custom-select d-block w-30\"
id=\"mode\" onchange=\"drawPaper()\" name=\"mode\">
<option value=\"RGB\">Full</option>
<option value=\"BW\">Monochrome</option>
<option value=\"GRAY\">Greyscale</option>
</select>
</div>
</div>
<div class=\"col-3\">
<div class=\"input-group\">
<label for=\"Resolution\" class=\"input-group-
addon\">Quality</label>
<select class=\"custom-select d-block w-30\"
id=\"Resolution\" name=\"Resolution\">
<option value=\"150\">Low</option>
<option value=\"300\">Medium</option>
<option value=\"600\">High</option>
</select>
</div>
</div>
<div class=\"col-3\">
<div class=\"input-group\">
<label for=\"Orient\" class=\"input-group-
addon\">Orientation</label>
<select class=\"custom-select d-block w-30\"
id=\"orientation\" onchange=\"drawPaper()\" name=\"Orient\">
<option>0</option>
<option>90</option>
<option>180</option>
<option>270</option>
</select>
</div>
</div>
<div class=\"col-3\">
<div class=\"input-group\">
<label for=\"Orient\" class=\"input-group-
addon\">Image Width </label>
<input id=\"ImageWidth\" type=\"number\"
step=\"any\" value=\"0\" onchange=\"imgW()\" class=\"form-control\" name=\"Scale\">
</div>
</div>
<div class=\"col-3\">
<div class=\"input-group\">
<label for=\"Orient\" class=\"input-group-
addon\">Image Height </label>
<input id=\"ImageHeight\" type=\"number\"
step=\"any\" value=\"0\"onchange=\"imgH()\" class=\"form-control\" name=\"Scale\">
</div>
</div>
<div class=\"col-3\">
<div class=\"input-group\">
<div class=\"form-check form-check-inline\">
<input class=\"form-check\"
onchange=\"Aspect(this)\" type=\"checkbox\" id=\"AspectRatio\"
checked >
<class=\"form-check-label\"
for=\"AspectRatio\" style=\"font-size: medium; padding: 5px;\">
Aspect Ratio
</div>
</div>
</div>
</div>
</div>
<!--end visibility zone -->
<hr />
<button class=\"btn btn-primary\" type=\"button\"
onclick=\"save2JSON();\" id=\"btn_Print\" value=\"Print\">Print</button>
<button class=\"btn btn-success\" type=\"button\" onclick=\"
checkForfile(jsonstr);\">Preview</button>
<input class=\"btn btn-secondary\" type=\"reset\"
onclick=\"cleanUp();\"value=\"Reset\">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=\"container py-2\" id=\"mainUI1\" style=\"background-color: #F5F5F5;\">
<div class=\"container py-2\" id=\"container\"></div>
</div>
<div class=\"container py-2\" id=\"mainUI2\" style=\"background-color: #F5F5F5;\">
<div class=\"row\">
<div class=\"col text-center\">
<small>
Toll Free: 1800 000 000| Email: <a
href=\"mailto:example@example.com\">example@example.com</a><br>
©2022 , Inc. All rights reserved.
</small>
</div>
</div>
</div>
标签： html bootstrap-4 html5-canvas