html pc和移动端共用一个页面，移动端通过缩放达到适配页面，滚动飘窗

pc和移动端共用一个页面

@media (max-width: 1000px)
body {height: 100%;position: relative;
}
@media (max-width: 1000px)
#index-P {position: absolute;top: 0;left: 0;transform-origin: top left;width: 1200px;/*pc端页面内容主体宽度*/
}

<script>
document.addEventListener('DOMContentLoaded', function() {const scaledContainer = document.getElementById('index-P');function updateScale() {const windowWidth = window.innerWidth;const containerWidth = 1200; // PC端设计宽度// 计算缩放比例let scale = windowWidth / containerWidth;// 限制最大缩放比例if (scale > 1) scale = 1;// 应用缩放if (scale !== 1) {scaledContainer.style.transform = `scale(${scale})`;}}// 初始调用updateScale();// 监听窗口大小变化window.addEventListener('resize', updateScale);});</script>

滚动飘窗

<style>#movingBox {background: url({$style_path}/img/P/movebg.jpg);border-radius: 8px;box-shadow: 4px 6px 11px #eeeeee;}.kuangBtn {height: 45px;width: 150px;color: white;display: flex;align-items: center;justify-content: center;border-radius: 5px;margin: 45px auto 0 auto;background-color: #DF4F53;}.closePiao1 {position: absolute;right: -16px;top: -17px;}.kuang {height: 250px;width: 520px;background: white;padding: 20px;font-size: 20px;line-height: 29px;border-radius: 10px;margin: 20px;}.padding5 {padding-left: 5px;}.kuangleft {position: relative;top: 18px;display: flex;}.colorBlue {color: #DF4F53;font-size: 22px;margin-left: 5px;}/* 浮动方块样式 */.floating-box {width: 560px;height: 290px;position: fixed;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;z-index: 200;pointer-events: auto;}
</style>	

<div class="floating-box" id="floatingBox"><div id="movingBox"><div class="closePiao1" id="closePiao1"><i class="layui-icon layui-icon-close-fill" style="font-size: 30px; color:#cdcdcd; "></i></div><div class="kuang"><div class="kuangtop"><p>&nbsp;&nbsp;&nbsp;&nbsp;促进招投标流程公开透明化，优化项目流程，推动企业发展，现开展全国优质供应商、分供商入驻平台，引入信息资源库，开办线上登记报名工作。</p></div><div class="kuangleft"><p>加急办理咨询热线: </p><span class="colorBlue">400 400 2000</span></div><div class="kuangBtn from-box-click"><i class="icon-pencil"></i><div class="padding5">立即入驻</div></div></div></div></div>

document.addEventListener('DOMContentLoaded', function() {var windowWidth = $(window).width();if (windowWidth > 1000) {const box = document.getElementById('floatingBox');const closeBtn = document.getElementById('closePiao1');let posX = Math.random() * (window.innerWidth - box.offsetWidth);let posY = Math.random() * (window.innerHeight - box.offsetHeight);let speed = 1.5; // 初始慢速let dx = speed;let dy = speed;let isPaused = false;let isVisible = true;let animationId;// 关闭/显示按钮功能closeBtn.addEventListener('click', function() {if (isVisible) {// box.style.display = 'none';box.remove("floatingBox")cancelAnimationFrame(animationId);}isVisible = !isVisible;});// 更新方块位置function updatePosition() {if (isPaused) return;posX += dx;posY += dy;// 边界检测if (posX <= 0 || posX >= window.innerWidth - box.offsetWidth) {dx = -dx;posX = Math.max(0, Math.min(posX, window.innerWidth - box.offsetWidth));}if (posY <= 0 || posY >= window.innerHeight - box.offsetHeight) {dy = -dy;posY = Math.max(0, Math.min(posY, window.innerHeight - box.offsetHeight));}// 应用新位置box.style.left = posX + 'px';box.style.top = posY + 'px';animationId = requestAnimationFrame(updatePosition);}// 鼠标悬停事件box.addEventListener('mouseenter', function() {isPaused = true;box.classList.add('paused');});// 鼠标离开事件box.addEventListener('mouseleave', function() {isPaused = false;box.classList.remove('paused');cancelAnimationFrame(animationId);animationId = requestAnimationFrame(updatePosition);});// 窗口大小变化时调整方块位置window.addEventListener('resize', function() {posX = Math.min(posX, window.innerWidth - box.offsetWidth);posY = Math.min(posY, window.innerHeight - box.offsetHeight);});// 初始位置box.style.left = posX + 'px';box.style.top = posY + 'px';// 开始动画animationId = requestAnimationFrame(updatePosition);}});
</script>