JS制作手机端自适应缩放显示
作者:bea
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(vers
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) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
示例一:
<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) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript中的toLocaleDateString()方法使用简介
- ECMAScript6块级作用域及新变量声明(let)
- JavaScript中的toDateString()方法使用详解
- ECMAScript6新增值比较函数Object.is
- ECMAScript6函数剩余参数(Rest Parameters)
- ECMAScript6函数默认参数
- 在JavaScript中操作时间之setYear()方法的使用
- 简介JavaScript中setUTCSeconds()方法的使用
- JS中产生标识符方式的演变
- JS中处理时间之setUTCMinutes()方法的使用
- JavaScript中setUTCMilliseconds()方法的使用详解
- JavaScript中setUTCFullYear()方法的使用简介
- 禁止按回车键提交表单的方法
- JavaScript中的setUTCDate()方法使用详解
- 简介JavaScript中的setTime()方法的使用
- JS/Jquery判断对象为空的方法
- 详解JavaScript中setSeconds()方法的使用
- 无刷新上传文件并返回自定义值
- JavaScript中setMonth()方法的使用详解