手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账号绑定</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, address=no, email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script>
var iWidth=document.documentElement.clientWidth;
iWidth = iWidth>640?640:iWidth;
document.getElementsByTagName("html")[0].style.fontSize=iWidth/32+"px";
</script>
<script>
/*刚开始这样设置但是在安卓的一些浏览器中不能及时的获取到屏幕宽度并改变字体大小
window.onorientationchange = function(){
var iWidth=document.documentElement.clientWidth;
iWidth = iWidth>640?640:iWidth;
document.getElementsByTagName("html")[0].style.fontSize=iWidth/32+"px";
}*/

function fontSize(){
var iWidth=document.documentElement.clientWidth;
iWidth = iWidth>640?640:iWidth;
document.getElementsByTagName("html")[0].style.fontSize=iWidth/32+"px";
}

function hengshuping(){
  if(window.orientation==180||window.orientation==0){fontSize();};//手机竖屏
  if(window.orientation==90||window.orientation==-90){fontSize();};//手机横屏
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);//手机改变状态时也执行该方法
</script>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/bangding.css">
<style>
header{ width:97%;padding:1em 0 1em 3%; border-bottom:2px solid #88c165;}
header img{ height:auto; width:67%; display:block;}
.bd_wrap{ width:94%; height:auto; padding:2rem 3% 1.7rem; background:#f4f4f4; overflow:hidden;}
.bd_top{ width:94.7%; height:auto; padding:0.9rem 1.6% 0.5rem 3.7%; background:#7fa5dd;}
.num{ font-size:1.5rem; color:#FFF; border-left:0.2rem solid #FFF; width:95%; padding-left:0.5rem; height:1.5rem; line-height:1.5rem;}
.num_con{ font-size:1rem; padding-left:0.5rem; color:#FFF; margin-top:1rem;}
.content{ width:94.7%; height:auto; padding:1rem 1.6% 26rem 3.7%; background:url(../img/last_li2.png) no-repeat left bottom #f7fcff; overflow:hidden; position:relative;}
.nation{ width:12%; height:3rem; font-size:1.5rem; line-height:3rem;}
.img{ width:2.8%; height:3rem; line-height:3rem; margin-left:0.5%; margin-right:2.5%;}
.img img{ width:100%; height:auto; -webkit-transform-origin:center center; -webkit-transition:0.5s;}
.shuru { width:66%; height:1.2rem; border:0.1rem solid #7fa5dd; border-radius:0.2rem 0 0 0.2rem; padding:0.8rem 0 0.8rem 0.7rem; line-height:1.2rem; font-size:1rem;}
.sousou{ width:11%; height:2.8rem;  background:url(../img/sou.png) no-repeat left top #7fa5dd; background-size:contain;border:0.1rem solid #7fa5dd; border-radius:0 0.2rem 0.2rem 0;}
.level{ width:94%; height:34.85rem; background:url(../img/level.png) no-repeat; background-size:contain; position:absolute; margin-top:3rem; display:none;}
.role{ width:100%; height:1.6rem; margin:2.2rem 0 0 3.2%;}
.role1{ width:5.6%; height:1.6rem; background:url(../img/role1.png) no-repeat; background-size:contain; border-radius:50%;}
.teacher{ font-size:1.5rem; width:15%; height:1.6rem; line-height:1.6rem; margin:0 4% 0 2%;}
.role2{width:5.6%; height:1.6rem; background:url(../img/role2.png) no-repeat; background-size:contain;  border-radius:50%;}
.student{font-size:1.5rem; width:20%; height:1.6rem; line-height:1.6rem;}
.form{ width:100%;margin:2.2rem 0 0 0; text-align:center;}
.form input:nth-of-type(1){ width:92%; height:1.2rem; border:0.1rem solid #7fa5dd; border-radius:0.2rem; padding:0.8rem 0 0.8rem 0.7rem; line-height:1.2rem; font-size:1rem; margin-bottom:0.5rem;}
.form input:nth-of-type(2){ width:92%; height:1.2rem; border:0.1rem solid #7fa5dd; border-radius:0.2rem; padding:0.8rem 0 0.8rem 0.7rem; line-height:1.2rem; font-size:1rem;}
.form input:nth-of-type(3){-webkit-appearance: none;padding:0.6rem 0.8rem 0.6rem 0.8rem; background:#88c165; font-size:1.5rem; border-radius:0.2rem; margin-top:2rem ;color:#FFF;}
</style>
</head>
<script>
window.onload = function(){
var oRole1 = document.getElementById("role1");
var oRole2 = document.getElementById("role2");
var oNation = document.getElementById("nation");
var oImg = document.getElementById("img");
var oLevel = document.getElementById("level");
var b = true;

oRole1.ontouchend = function(){
this.style.backgroundImage ="url(img/role2.png)";
oRole2.style.backgroundImage ="url(img/role1.png)";
}
oRole2.ontouchend = function(){
this.style.backgroundImage ="url(img/role2.png)";
oRole1.style.backgroundImage ="url(img/role1.png)";
}
oNation.ontouchend = function(){
if(b){
oImg.style.WebkitTransform = "rotate(-180deg)";
oLevel.style.display = "block";
b = false;
}else{
oImg.style.WebkitTransform = "rotate(0deg)";
oLevel.style.display = "none";
b = true;
}
}
}
</script>
<body>
<header>
<a href="javascript:;"><img src="http://www.mamicode.com/img/logo.png" alt="幸福流"></a>
</header>
<div class="bd_wrap">
<div class="bd_top">
<p class="num">账号绑定</p>
   <p class="num_con">根据省份选择您所在的学校，再输入您在“幸福流－学校子网站”中的用户名和密码</p>
</div>
<div class="content">
<span class="fl nation" id="nation">全国</span>
      <span class="fl img"><img src="http://www.mamicode.com/img/sel.png" id="img"></span>
      <input type="text" class="fl shuru" placeholder="请输入学校名称">
      <div class="sousou fl"></div>
      <div class="level" id="level">

      </div>
      <div class="role fl">
        <span class="fl role1" id="role1"></span>
         <span class="fl teacher">老师</span>
         <span class="fl role2" id="role2"></span>
         <span class="fl student">学生</span>
      </div>
      <div class="form fl">
        <input type="text" placeholder="用户名：">
         <input type="password" placeholder="密码：">
         <input type="button" value="http://www.mamicode.com/绑定登录">
      </div>
</div>
</div>
</body>
</html>

首页 > 代码库 > 手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小

手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小

看完仍有疑问？有类似问题直接问程序猿