JS制作手机端自适应缩放显示
JS制作手机端自适应缩放显示
示例一：
<script>
var_width=parseInt(window.screen.width);
varscale=_width/640;
varua=navigator.userAgent.toLowerCase();
varresult=/android(\d+\.\d+)/.exec(ua);
if(result){
varversion=parseFloat(result[1]);
if(version>2.3){
document.write('<metaname="viewport"content="width=640,minimum-scale='+scale+',maximum-scale='+scale+',target-densitydpi=device-dpi">');
}else{
document.write('<metaname="viewport"content="width=640,target-densitydpi=device-dpi">');
}
}else{
document.write('<metaname="viewport"content="width=640,user-scalable=no,target-densitydpi=device-dpi">');
}
</script>
示例二：
<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
if(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)){
varviewportmeta=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>
示例三：
<metacharset="UTF-8"> <metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport"> <metacontent="yes"name="apple-mobile-web-app-capable"> <metacontent="black"name="apple-mobile-web-app-status-bar-style"> <metacontent="telephone=no"name="format-detection">
总结：
一.其实并不难。首先，在网页代码的头部，加入一行viewport元标签。
<metaname="viewport"content="width=device-width,initial-scale=1"/>
二.不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
三.相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。
四.流动布局（fluidgrid）"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main{float:right;width:70%;}.leftBar{float:left;width:25%;}
五.图片的自适应（fluidimage）除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
以上所述就是本文的全部内容了，希望大家能够喜欢。