JS控制网页框架根据桌面或移动设备显示不同网页
<html>
<head>
<meta charset="UTF-8">
<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>网站标题</title>
<style>
html,
body,
iframe {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrap {
width: 100%;
height: 100%;
}
iframe {
border: none;
}
</style>
</head>
<body>
<script>
document.write("<style>body{visibility:hidden;}</style>");
var desktopUrl = "/pc.html";
var mobileUrl = "/mb.html";
function isMobileDevice() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function initFrame() {
var frame = document.createElement("div");
frame.id = "mobile-frame";
frame.style.cssText = "position:fixed;top:0;left:0;z-index:9999;height:100vh;width:100vw;background:#fff";
var iframe = document.createElement("iframe");
iframe.id = "showcloneshengxiaon";
iframe.style.cssText = "width:100%;height:100%;border:none";
iframe.src = isMobileDevice() ? mobileUrl : desktopUrl;
frame.appendChild(iframe);
document.body.appendChild(frame);
document.body.style.visibility = "visible";
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
var oMeta = document.createElement("meta");
oMeta.name = "viewport";
oMeta.content = "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no";
document.head.appendChild(oMeta);
}
document.addEventListener("DOMContentLoaded", initFrame);
</script>
</body>
</html>