手机网站建设自适应屏幕大小代码

2014-11-12 郑州网站建设  
手机网站根据屏幕分辨率大小对应调用对应CSS,首先应在head中加过<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">表明限值屏幕的宽度是物理宽度了。
或<meta name="viewport" content="width=device-width, initial-scale=1.0">这句是告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。
 
css根据屏幕分辨率大小对应调用,常见手机屏幕宽有240PX;360PX;480PX;640PX等。
当手机分辨率宽360PX时调用:
@media screen and (min-width: 360px) {
 .text{ padding-bottom:0;} 
}
@media screen and (min-width: 480px) {
 .text{ padding-bottom:0;} 
}
 
或还可在前台页面根据分辨率不同调用不同CSS:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="http://www.studstu.com/css/pic320.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 479px) and (max-width: 639px)" href="http://www.studstu.com/css/pic480.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 639px)" href="http://www.studstu.com/css/pic640.css">
 
 
手机网站自适应手机屏幕宽度的代码:
 
在网页的头部加上 <meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
 
不允许用户放大缩小页面、页面自适应宽度
<meta name="viewport" content="initial-scale=1, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
 
根据屏幕不同设置对应CSS,这就是目前使用最多最广泛的手机网站自适应代码方法了。
 

河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://www.tzchb.com/tech/547.html转载请标明出处,谢谢合作!
标签:
  • 代码
  • css
  • 自适应
  • 浏览器
  • 手机网站建设