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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小相关的知识,希望对你有一定的参考价值。

<!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="css/reset.css">
<link rel="stylesheet" type="text/css" href="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="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="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="绑定登录">
        </div>
    </div>
</div>
</body>
</html>

 
 
 
 




























































































































以上是关于手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小的主要内容,如果未能解决你的问题,请参考以下文章

《夜神安卓模拟器》切换横竖屏方法介绍

【iOS】Swift4.0 横竖屏监测、动态切换

检测手机横竖屏切换

android怎么设置横竖屏切换

android开发横竖屏问题

android开发横竖屏问题