手機網站建設自適應屏幕大小代碼
手機網站根據屏幕分辨率大小對應調用對應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)" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 479px) and (max-width: 639px)" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 639px)" >
手機網站自適應手機屏幕寬度的代碼：
在網頁的頭部加上 <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網站前后臺訪問慢解決辦法 網站建設原創內容的重要性 阿里云備案詳細流程及注意事項 網站被降權原因總結 從騰訊網改版看網頁設計個性化潮流
