JS制作手机端自适应缩放显示

JS制作手机端自适应缩放显示
示例一：

<script>var _width = parseInt（window.screen.width）;var scale = _width/640;var ua = navigator.userAgent.toLowerCase（）;var result = /android （d+.d+）/.exec（ua）;if （result）{var version = parseFloat（result[1]）;if（version>2.3）{document.write（"<meta name="viewport" content="width=640, minimum-scale = "+scale+", maximum-scale = "+scale+", target-densitydpi=device-dpi">"）;}else{document.write（"<meta name="viewport" content="width=640, target-densitydpi=device-dpi">"）;}} else {document.write（"<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">"）;}</script>

示例二：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script type="text/javascript">$（function（）{ if （navigator.userAgent.match（/iPhone/i） || navigator.userAgent.match（/iPad/i）） {var viewportmeta = document.querySelector（"meta[name="viewport"]"）; if （viewportmeta） {viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0";document.addEventListener（"touchstart", function （） { viewportmeta.content = "viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6";}, false）; document.addEventListener（"orientationchange", function （） { viewportmeta.content = "viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0";}, false）; }}}）;</script>

示例三：

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection">

总结：
一.其实并不难。首先，在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" />
二. 不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
三. 相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。
四. 流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }
五. 图片的自适应（fluid image）除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
以上所述就是本文的全部内容了，希望大家能够喜欢。