手机网站建设自适应屏幕大小代码
手机网站根据屏幕分辨率大小对应调用对应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.studstu.com原创，转摘请保留文章版权，谢谢。
奇亿网站建设公司2014官网新版上线公告 如何保留文本框的输入格式 手机网站微网站微商城PC网站如何区别 奇亿网站制作国庆放假通知 百度推出直达号服务试水O2O 英文网站建设外链效果对比 奇亿网站建设关于中秋节放假安排 企业网站建设定位原则 2014网站SEO优化报告全球版 网站建设如何进行国际化定位 谷歌广告联盟AdWords九月新政策 为产品使用购物广告 网站建设中不可忽视的网站测试工序 微电商网站建设的几种类型 百度网站优化六月份变动趋势 wordpress网站前后台访问慢解决办法 网站建设原创内容的重要性 阿里云备案详细流程及注意事项 网站被降权原因总结 从腾讯网改版看网页设计个性化潮流
