自适应网站宽度(尺寸)和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在自适应网站开发中总结出的小小经验,愿能帮助到大家。