自适应网站宽度(尺寸)和meta

所需meta标签:

<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
<meta name="format-detection" content="telephone=no" />

 

IE9兼容:(这里直接调用了googlecode中的代码,但是google在本土是打不开的,所以大家可以百度下载 css3-mediaqueries.js 

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 

 

自适应css尺寸:

@media only screen and (min-width: 1005px){}

@media only screen and (min-width: 961px) and (max-width: 1004px) {}

@media only screen and (min-width: 769px) and (max-width: 960px) {}

@media only screen and (min-width:481px) and (max-width: 768px) {}

@media only screen and (max-width: 480px){}

 

以上是本人及团队成员kitty在自适应网站开发中总结出的小小经验,愿能帮助到大家。