移动设备的viewport是可以由js去更改，动态地变化的。思路很简单，就像传统的css换肤思路一样，link标签的href属性可以通过js动态修改，修改完后就去加载新的css样式，从而实现了换肤。viewport也一样，viewport是写在meta标签里的，通过js修改这个标签的content属性的值就ok了。
<!doctype html>
<html>
<head>
<title>test for iphone</title>
<meta charset="utf-8">
<meta name="viewport" id="viewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<style type="text/css">
html,body{margin:0;padding:0;height:100%;background:#000;}
#wrap{width:980px;height:545px;overflow:hidden;background:#999;margin:0 auto;}
</style>
</head>
<body>
<div id="wrap">
<input type="button" value="320" id="btn">
<input type="button" value="640" id="btn2">
</div>
<script type="text/javascript">
var viewport = document.getElementById("viewport");
document.getElementById("btn").οnclick=function(){
viewport.content = "width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0";
}
document.getElementById("btn2").οnclick=function(){
viewport.content = "width=640,initial-scale=2.0,minimum-scale=1.0,maximum-scale=3.0";
}
</script>
</body>
</html>
扫一扫
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
