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 content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } </script>

示例二:

<script type="text/javascript" src="https://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"> <meta content="yes"> <meta content="black"> <meta content="telephone=no">

总结:

一.其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。

<meta content="width=device-width, initial-scale=1" /> 

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。

三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。

四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。  
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } 

五. 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdsjw.html