wap页面的结构都放到 LM-wall320 里
<div id="LM-wall320"> ... </div>
通过js根据不同手机页面的宽度根据320计算 从顶部中间开始缩放
(function(){
var doc = document,
style=doc.createElement(‘style‘),
Timmer = null;
style.innerHTML = setStyle();
doc.getElementsByTagName(‘head‘)[0].appendChild(style);
/*屏幕翻转*/
window.addEventListener(window[‘onorientationchange‘] ? ‘orientationchange‘ : ‘resize‘, function(){
clearTimeout(Timmer);
Timmer = setTimeout(function(){
style.innerHTML = setStyle();
},100);
}, false);
/*生成样式*/
function setStyle(){
var w = doc.documentElement.clientWidth;
return ‘#LM-wall320{-webkit-transform:scale(‘+w/320+‘);-webkit-transform-origin:top center;}‘;
}
})();
简单demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zoom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no"/>
<style>
*{margin:0;padding:0;}
body{height: 100%;}
#LM-wall320{margin:0 auto;position: relative;width: 320px;height: 100%;line-height: 500px;font-size: 100px;text-align: center; background: red;}
</style>
<script>
(function(){
var doc = document,
style=doc.createElement(‘style‘),
Timmer = null;
style.innerHTML = setStyle();
doc.getElementsByTagName(‘head‘)[0].appendChild(style);
/*屏幕翻转*/
window.addEventListener(window[‘onorientationchange‘] ? ‘orientationchange‘ : ‘resize‘, function(){
clearTimeout(Timmer);
Timmer = setTimeout(function(){
style.innerHTML = setStyle();
},100);
}, false);
/*生成样式*/
function setStyle(){
var w = doc.documentElement.clientWidth;
return ‘#LM-wall320{-webkit-transform:scale(‘+w/320+‘);}‘;
}
})();
</script>
</head>
<body>
<div id="LM-wall320">
zoom
</div>
</body>
</html>
时间： 2024-08-06 22:31:14