h5手机端如何快速的兼容富文本内容
最近客户需要修改一个手机端合同签约样子，但是他们的合同内容是后端加载过来的，为了保留他们原有的功能，尽可能的让手机端的样子和PC端一致，我使用了css中的transform属性，因为他们合同的正常显示的宽度大概是900px，所以将外层的div进行transform的缩放，并且为了兼容高度用js重新计算一个transform缩放后的高度的，下面是大概的场景和解决方案
<style>
@media only screen and (max-width: 767px) {/* 移动设备样式 */.treary_box{width: 900px;transform-origin: top left;transform: scale(0.37);}.cons{display: inline-block; /* 用于包裹所有元素，但不撑开.height */overflow: hidden;
}
}.treary_name{font-size: 25px;text-align: center}.treary_content{margin-top: 5px}.treary_content img{max-width: 100%!important;}.form_tip{font-size: 20px;text-align: center;color: red}.my_form{margin-top: 15px}.signature_tip{text-align: center;font-weight: bold;font-size: 18px}.signature{background-color: #eeeeee;margin: 20px auto}.signature_but_box{margin: 20px;height: 25px;}.signature_but{height: 25px;width: 50%;float: left;}.img_box{max-width: 95%;display: block;margin: 0 auto}.n-default .msg-wrap{position: relative;}/*.login-section{min-height: 550px}*/.showproduct {margin: 10px;font-size: 18px;
}
span.txt.flex1 {text-align: center;
}
.showproduct {background: #fff;font-family: 'Microsoft Yahei';padding: .25rem .3rem;position: relative;
}.popupBox{background: rgba(0, 0, 0, 0.3);position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;}.popup{background: #fff;border-radius: 10px;overflow: hidden;}.btnBox{height: 50px;display: flex;font-size: 22px;align-items: center;}.btnBox div{flex: 1;text-align: center;}.signature_img{height: 40px;width: 80px;border-style: dashed; border-width: 1px;border-color: red;}
</style><div id="content-container" class="container" style="background-color: #8c8a8a;"><div class="showproduct" ><div class="logon-tab clearfix"> </div><div class="login-main"><div class="cons"><div class="treary_box" id="myDiv"><div class="treary_item treary_name">合同的标题</div><div >这里是合同的内容</div></div></div><div class="popupBox"><div class="popup"><div id="signature" class="signature" ></div><!-- <canvas id="signName" width="500" height="250">--><!-- 您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作--><!-- </canvas>--><div class="btnBox"><div id="createImage">确定</div><div id="clearCanvas">取消</div></div></div></div><hr/><div >{:token()}<input type="hidden" name="category_id" id="category_id" value="{$treaty_info.id}" /><input type="hidden" name="image" id="image" value="" /><div class="form-group"><button class="btn btn-primary btn-lg btn-block btn-submit">{:__('提交')}</button></div></div></div></div>
</div>
<script src="__ADDON__/js/index.js"></script>
<script>$(document).ready(function(){var innerDiv = document.querySelector("#myDiv");var innerHeight = innerDiv.offsetHeight;// 获取缩放比例并计算高度var transformValue = window.getComputedStyle(innerDiv).getPropertyValue("transform");var values = transformValue.split("(")[1].split(")")[0].split(",");var scaleX = values[0];var scaleY = values[3];var transformedHeight = innerHeight * scaleY;// 将父级DIV元素的高度设置为内部DIV元素的高度var container = document.querySelector(".cons");container.style.height = transformedHeight+100+ "px";var index = 0;var images = [];var tag_name = '';console.log("初始化",images);//初始化签名样式var arguments = {width: '400px',height: '250px',cssclass: 'signature',signatureLine: false,//去除默认画布上那条横线lineWidth: '5',};$("#signature").jSignature(arguments);//清除重写$('#clearCanvas').on('click',function(){$("#signature").jSignature("reset");//清除重写调用方式// $('#signName').clearSignature();$('.popupBox').css('display' , 'none')});//点击唤起签名$('.signClass' ).on('click', function(e) {tag_name = e.currentTarget.dataset.tag_name;//每个签名的标志index = $(this).index()$('.popupBox').css('display' , 'flex')})//确认按钮$('#createImage').on('click',function(){// console.log(tag_name)//标准格式但是base64会被tp框架过滤，所不校验，但是jSignature默认是使用pngvar datapair = $("#signature").jSignature("getData", "image");var i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];i.image = datapair[1];$.ajax({url: "/addons/treaty/index/upload",data: {'image_data':encodeURIComponent(i.src)},type: "post",success: function (res) {if (res.code == 1) {layer.msg(res.msg);// console.log("tag_name",tag_name);// console.log("开始",images);var is_replace = 0;$.each(images, function (index, item) {if(item['name'] == tag_name){images[index] = {name:tag_name,url:res.data.url};is_replace = 1}})if(!is_replace){images.push({name:tag_name,url:res.data.url});}// console.log("结束",images);$('#newImage').attr('src',res.data.url);var className = ".sign_"+tag_name$(className).html(' <img class="signature_img" src="' +res.data.url + '" />')$("#signature").jSignature("reset");$('.popupBox').css('display' , 'none')} else {layer.msg(res.msg);}}});});$(".btn-submit").click(function () {var category_id = $("#category_id").val();var token = $("input[name='__token__']").val();$.ajax({url: "/addons/treaty/index/index",data: {__token__:token,images:images,category_id:category_id},type: "post",success: function (res) {if (res.code == 1) {layer.msg(res.msg);setTimeout(function () {window.location.href=res.url;},1000)} else {$("input[name='__token__']").val(res.data.token)layer.msg(res.msg);return false;}}})});$("img").click(function () {var src = $(this).attr("src");// layer.open({// type: 1,// title: false,// closeBtn: 1,// shadeClose: false,// skin: 'img_box',// content: '<img style="display: block;margin: 0 auto;max-width: 85%" src="'+$(this).attr("src")+'">'// });});});
</script>