Mobile phone end of the screen switch, how to do to the Android browser in time to change the font size

Source: Internet
Author: User

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Account Bindings </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>
/* Just started this setting but in some Android browsers do not get the screen width and change the font size in time
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 ();};/ /Cell Phone Vertical screen
if (window.orientation==90| | window.orientation==-90) {fontSize ();};/ /Mobile Phone Horizontal screen
}
Window.addeventlistener ("Onorientationchange" in Window?) "Orientationchange": "Resize", hengshuping, false);//The method is also executed when the cell phone changes state
</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%;p adding: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>
<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>
<a href= "javascript:;" ></a>
<div class= "Bd_wrap" >
<div class= "Bd_top" >
<p class= "num" > Account bindings </p>
<p class= "Num_con" > select your school according to the province, then enter your username and password in "Happiness Stream-School subsite" </p>
</div>
<div class= "Content" >
<span class= "FL Nation" id= "Nation" > National </span>
<span class= "fl img" ></span>
<input type= "Text" class= "fl Shuru" placeholder= "Please enter school name" >
<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" > Teacher </span>
<span class= "fl role2" id= "Role2" ></span>
<span class= "FL Student" > Students </span>
</div>
<div class= "Form FL" >
<input type= "text" placeholder= "Username:" >
<input type= "password" placeholder= "Password:" >
<input type= "button" value= "Bind login" >
</div>
</div>
</div>
</body>

Mobile phone end of the screen switch, how to do to the Android browser in time to change the font size

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.