网络日益更新,现在手机网站,微信网站更是趋向流行,但是在手机网站制作过程中,首页也有不同 的分辨率,那么怎么满足手机网站自动适应屏幕大小哩?
武汉做网站告诉您一些简单的处理方法满足手机网站自动适应不同屏幕大小的手机!
手机网站根据屏幕分辨率大小对应调用对应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,这就是目前使用最多最广泛的手机网站自适应代码方法了。欢迎大家提出更多的解决方法。