您的位置：首页 > 移动开发

分析surface官网根据宽度自适应兼容移动端的写法（兼容IE6-8）

2013-05-20 13:48 337 查看

之前看到微软的surface官方页面（http://www.microsoft.com/surface/zh-cn），这种展现形式能够在移动端上达到同样的展示效果。
特意研究了一下他的写法，首先在head标签里有
<meta name="viewport" content="width=device-width, initial-scale=1.0，minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
content里的参数分别是：
width=device-width ：表示宽度是设备屏幕的宽度initial-scale=1.0：表示初始的缩放比例minimum-scale=1.0：表示最小的缩放比例maximum-scale=1.0：表示最大的缩放比例user-scalable=no：表示用户是否可以调整缩放比例
在PC端上改变浏览器宽度达到一定像素会造成不同显示效果，看了下他的写法，是通过css的@media screen来实现的。比如其中的：
@media all and (max-width:768px) {
.p2-table.desktop {
display:none
}
.p2-table.mobile {
display:table
}
}
很遗憾的是这样的写法不兼容IE6，7，8。

我尝试用JQUERY来达到一样的效果，PC端和移动端显示效果一样，并且要兼容IE6-8。
下面是我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=21.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var win_width;
changeNav();
$(window).resize(function (){
changeNav();
})

function changeNav(){
win_width = $(document).width();
if(win_width>400){
$(".nav1").show();
$(".nav2").hide();
}else{
$(".nav2").show();
$(".nav1").hide();
}
}

});
</script>
<style>
*{ padding:0; margin:0;}
.box{ width:100%; line-height:40px; font-size:40px; color:#FFF; font-weight:bold; background:#333; padding:10px 0;}
ul{ width:100%; overflow:hidden;}
li{ width:100%; padding:10px 0; line-height:24px; background:#069; font-size:24px; font-weight:bold; border-bottom:1px solid #CCC; color:#fff; text-align:center;}
.nav2{ display:none;}
.nav2 li{ background:#900; color:#999;}
</style>
</head>
<body>
<div class="box">GOOD</div>
<ul class="nav1">
<li>导航类型1</li>
<li>导航类型1</li>
<li>导航类型1</li>
</ul>
<ul class="nav2">
<li>导航类型2</li>
<li>导航类型2</li>
<li>导航类型2</li>
</ul>
</body>
</html>

本文出自 “pozey的前端博客” 博客，请务必保留此出处http://pozey.blog.51cto.com/6752323/1204758

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航