HTML5 自适应屏幕代码(移动端)

311 views

 

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>手机网站</title>
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ />
<meta name=”format-detection” content=”telephone=yes” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<meta name=”author” content=”duanliang, duanliang920.com” />
<style>
body{font-size:82.5%;font-family:”Microsoft YaHei”,Arial; overflow-x:hidden; overflow-y:auto;}
.viewport{ max-width:750px; min-width:300px; margin:0 auto;}
#div1{background:url(qieshuiguo/images/backgroundnew.jpg);
width:750px;height:1206px;
color:#FFF;
font-size:24px;};
</style>
<script>
if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
{
stageWidth = document.documentElement.clientWidth;
stageHeight = document.documentElement.clientHeight;

//判断横屏(为什么不用stageWidth > stageHeight来判断呢 因为一般的页面被切掉很小一部分还是允许的 就看数值多少了 0.665就是数值 可以修改)
if(stageWidth/stageHeight > 0.665)
{
stageScale = stageHeight/(1206/2);
div1.style.left = (stageWidth – 750/2*stageScale)/2 + ‘px’;
}
else
{
stageScale = stageWidth/(750/2);
div1.style.left = ‘0px’;
}
div1.style.width = 750/2*stageScale + ‘px’;
div1.style.height = 1206/2*stageScale + ‘px’;
}
</script>
</head>

<body>
<div id=”div1″>
大家好!我是沙子,这是我的第一个手机网页哦!我的电话是:13896601521
</div>
</body>
</html>

核心代码就是这段。

<script>
if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
{
stageWidth = document.documentElement.clientWidth;
stageHeight = document.documentElement.clientHeight;

//判断横屏(为什么不用stageWidth > stageHeight来判断呢 因为一般的页面被切掉很小一部分还是允许的 就看数值多少了 0.665就是数值 可以修改)
if(stageWidth/stageHeight > 0.665)
{
stageScale = stageHeight/(1206/2);
div1.style.left = (stageWidth – 750/2*stageScale)/2 + ‘px’;
}
else
{
stageScale = stageWidth/(750/2);
div1.style.left = ‘0px’;
}
div1.style.width = 750/2*stageScale + ‘px’;
div1.style.height = 1206/2*stageScale + ‘px’;
}
</script>

 

如果您觉得这篇文章对您有帮助,欢迎继续关注本站!!!我要赞助本站>>>

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注