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)除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
以上所述就是本文的全部内容了,希望大家能够喜欢。