手機網站建設自適應屏幕大小代碼

發(fā)布日期：[2014/10/24] 編輯：奇億廣州網站建設

手機網站根據(jù)屏幕分辨率大小對應調用對應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根據(jù)屏幕分辨率大小對應調用，常見手機屏幕寬有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;}
}

或還可在前臺頁面根據(jù)分辨率不同調用不同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。

不允許用戶放大縮小頁面、頁面自適應寬度
<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">

根據(jù)屏幕不同設置對應CSS，這就是目前使用最多最廣泛的手機網站自適應代碼方法了。

奇億網站建設http://www.studstu.com原創(chuàng)，轉摘請保留文章版權，謝謝。