手機(jī)網(wǎng)站建設(shè)自適應(yīng)屏幕大小代碼

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

手機(jī)網(wǎng)站根據(jù)屏幕分辨率大小對應(yīng)調(diào)用對應(yīng)CSS，首先應(yīng)在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">這句是告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進(jìn)行初始縮放。

css根據(jù)屏幕分辨率大小對應(yīng)調(diào)用，常見手機(jī)屏幕寬有240PX；360PX；480PX；640PX等。
當(dāng)手機(jī)分辨率寬360PX時(shí)調(diào)用：
@media screen and (min-width: 360px) {
.text{ padding-bottom:0;}
}
@media screen and (min-width: 480px) {
.text{ padding-bottom:0;}
}

或還可在前臺(tái)頁面根據(jù)分辨率不同調(diào)用不同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)" >

手機(jī)網(wǎng)站自適應(yīng)手機(jī)屏幕寬度的代碼：

在網(wǎng)頁的頭部加上 <meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網(wǎng)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9。對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

不允許用戶放大縮小頁面、頁面自適應(yīng)寬度
<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ù)屏幕不同設(shè)置對應(yīng)CSS，這就是目前使用最多最廣泛的手機(jī)網(wǎng)站自適應(yīng)代碼方法了。

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