移动端+pc端自适应适配解决方案

function adapter(callback) { var style = document.createElement("style"); var zWidth = 750; var zHeight = 1206; let innerWidth = Math.min(window.innerWidth, 750); var bjZoom = Math.max(innerWidth / zWidth, window.innerHeight / zHeight); var contentZoom = Math.min(innerWidth / zWidth, window.innerHeight / zHeight); var x1 = ((innerWidth - zWidth * bjZoom) / 2).toFixed(2); var y1 = ((window.innerHeight - zHeight * bjZoom) / 2).toFixed(2); var x2 = ((innerWidth - zWidth * contentZoom) / 2).toFixed(2); var y2 = ((window.innerHeight - zHeight * contentZoom) / 2).toFixed(2); var containerStyles = ` html, body{ transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; position: absolute; width: ${window.innerWidth}px; height: ${window.innerHeight}px; overflow: hidden; } .page, .container{ transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; position: absolute; left: 0; right: 0; width: ${innerWidth}px; height: ${window.innerHeight}px; overflow: hidden; margin: auto; } `; // 容器相关的样式 var pageStyles = ` .bg, .content, .scroll-view{ transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; position: absolute; width: ${zWidth}px; height: ${zHeight}px; } `; // 背景相关的样式 var bgStyles = ` .bg{ transform: translate(${x1}px, ${y1}px) scale(${bjZoom}); -webkit-transform: translate(${x1}px, ${y1}px) scale(${bjZoom}); } `; // 内容相关的样式 var contentStyles = ` .content{ transform: translate(${x2}px, ${y2}px) scale(${contentZoom}); -webkit-transform: translate(${x2}px, ${y2}px) scale(${contentZoom}); } `; // 自定义缩放相关的样式 var zoomStyles = ` .defineZoom{ zoom: ${contentZoom}; } `; // 内容相关的样式 var zoomWidth = innerWidth / zWidth; var scrollviewStyles = ` .scroll-view{ transform: scale(${zoomWidth}); -webkit-transform: scale(${zoomWidth}); width: ${innerWidth / zoomWidth}px; height: ${window.innerHeight / zoomWidth}px; overflow: auto; } `; style.textContent = ( containerStyles + pageStyles + bgStyles + contentStyles + scrollviewStyles + zoomStyles ).replace(/\n/g, ""); document.head.appendChild(style); // 适配完成 if (typeof callback == "function") { callback(); } } export default adapter;