允许网页宽度自动调整的 "自适应网页设计" 到底是怎么做到的?下面我们就来通过示例来探讨下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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) 除了布局和文本,"自适应网页设计" 还必须实现图片的自动缩放。
来源: http://www.phperz.com/article/17/0216/270927.html