根據瀏覽器視窗的大小不同自動調節文字大小

antzone發表於2017-03-12
瀏覽器

很多情況下，網頁的字型大小都是固定的，但是更為人性的措施就是根據視窗的大小自動調節字型的大小，當然也要看實際需要，下面就是一個能夠實現此功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 
<title>螞蟻部落</title>
<style type="text/css"> 
div{ 
  width:600px; 
  text-align:center; 
  font-size:4em; 
  color:#333; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var r = document.body.offsetWidth/window.screen.availWidth; 
  $(document.body).css("-webkit-transform","scale(" + r + ")"); 
}); 
$(window).resize(function(){ 
  var r=document.body.offsetWidth/window.screen.availWidth; 
  $(document.body).css("-webkit-transform","scale("+r+")"); 
}); 
</script> 
</head> 
<body> 
<div>螞蟻部落歡迎您</div> 
</body> 
</html>

以上程式碼實現了我們的要求，當調節視窗大小的時候能夠實現對字型大小的縮放。

相關文章