zoukankan      html  css  js  c++  java
  • 手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小

    <!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{ 97%;padding:1em 0 1em 3%; border-bottom:2px solid #88c165;}
    header img{ height:auto; 67%; display:block;}
    .bd_wrap{ 94%; height:auto; padding:2rem 3% 1.7rem; background:#f4f4f4; overflow:hidden;}
    .bd_top{ 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; 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{ 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{ 12%; height:3rem; font-size:1.5rem; line-height:3rem;}
    .img{ 2.8%; height:3rem; line-height:3rem; margin-left:0.5%; margin-right:2.5%;}
    .img img{ 100%; height:auto; -webkit-transform-origin:center center; -webkit-transition:0.5s;}
    .shuru { 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{ 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{ 94%; height:34.85rem; background:url(../img/level.png) no-repeat; background-size:contain; position:absolute; margin-top:3rem; display:none;}
    .role{ 100%; height:1.6rem; margin:2.2rem 0 0 3.2%;}
    .role1{ 5.6%; height:1.6rem; background:url(../img/role1.png) no-repeat; background-size:contain; border-radius:50%;}
    .teacher{ font-size:1.5rem; 15%; height:1.6rem; line-height:1.6rem; margin:0 4% 0 2%;}
    .role2{5.6%; height:1.6rem; background:url(../img/role2.png) no-repeat; background-size:contain;  border-radius:50%;}
    .student{font-size:1.5rem; 20%; height:1.6rem; line-height:1.6rem;}
    .form{ 100%;margin:2.2rem 0 0 0; text-align:center;}
    .form input:nth-of-type(1){ 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){ 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" alt="" 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>

     
     
     
     
  • 相关阅读:
    HDU 5273 Dylans loves sequence 暴力递推
    HDU 5285 wyh2000 and pupil 判二分图+贪心
    HDU 5281 Senior's Gun 贪心
    HDU 5651 xiaoxin juju needs help 逆元
    HDU 5646 DZY Loves Partition
    HDU 5366 The mook jong
    HDU 5391Z ball in Tina Town 数论
    HDU 5418 Victor and World 允许多次经过的TSP
    HDU 5642 King's Order dp
    抽屉原理
  • 原文地址:https://www.cnblogs.com/zhuyuanyuan/p/6134955.html
Copyright © 2011-2022 走看看