移動端視口
① 如何在移動端實現純css的自定義布局
在移動端實現純css的自定義布局的方法：
1、html5主頁面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>html5 移動端單頁面布局</title>
</head>
<body>
<!--頁面主體部分-->
<div class="main">
<section class="curr">
<img src="pp_1x.png" alt="">
</section>
<section class="hide">
<img src="css3.jpg" alt="">
</section>
<section class="hide">
<img src="hra.png" alt="">
</section>
<section class="hide">
<img src="company-info_1x.png" alt="">
</section>
</div>
<!--頁面菜單按鈕-->
<div class="menu">
<ul>
<li class="curr">Html5</li>
<li>Css3</li>
<li>Javascript</li>
<li>About</li>
</ul>
</div>
<script src="js/zepto.js"></script>
</body>
</html>
2、css編寫的樣式：
<style>
/*初始化css*/
*{ margin:0; padding: 0;}
li{ list-style-type: none;}
img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}
html,body{ width: 100%; height: 100%; background: #e4e4e4;
-webkit-tap-highlight-color: rgba(88,44,22,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
}
/*主體頁面樣式*/
.main{ width: 100%; height: auto; position: relative;}
.main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }
.main section.hide{ display: none;}
.main section.curr{ display: block;}
/*菜單樣式*/
.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
</style>
② pc端和移動端的頁面應該怎麼開發
應該說，移動端的開發是伴隨著HTML5的興起而出現的，2007年第一款iPhone誕生，2009年HTML5這個名詞第一次登上「舞台」。當時的移動互聯網開始逐漸興起，發展到今，移動互聯網已經和人們的日常生活密切相關。作為開發者，對於一個嶄新的事物，一直在嘗試的「路上」，到底最好的開發方式是什麼？本文介紹了從移動端誕生到現在，自己探索到的開發方法，並配以相應知識點，歡迎跟大家溝通、分享。初次接觸移動端，絕對單位的使用自己接觸移動端開發是在2012年，那時候比較新潮的是製作WEBAPP。什麼是WEBAPP呢？所謂的WEBAPP就是用網頁模擬出原生語言（如iOS）開發的APP交互效果。雖然在表現層面上，HTML5表現突出，但不得不承認的是，在系統性能層面，WEBAPP明顯要差於原生應用（即NativeAPP）。這也就使得WEBAPP這條路暫時性的被堵住了。於是，移動端的開發方向逐漸向移動端網頁傾斜。對於PC端，我們一直使用的是px（像素）進行代碼的書寫，但是到了移動端，需要面臨不同的解析度。在2012年的時候，自己和團隊成員在寫移動端的時候，由於是初次接觸，還是在使用px（像素）作為單位。因為在2012年的時候，絕大多數的手機的屏幕大小都是320*480解析度，所以，即便是使用像素作為單位進行移動端網頁開發也是完全可以的。關於視口的知識，可點擊查看——移動端H5知識-視口viewport橫向百分比，縱向像素值隨著移動端的繼續發展，在2012年9月，iPhone5上市，開始引領「特殊解析度」的發展，於是，320*480解析度的手機屏幕在整個手機市場當中佔有的份額越來越少，各種各樣的解析度如雨後春筍般冒了出來。此時我們再進行固定像素進行開發明顯是不明智的。於是，我們開始採用百分比（相對度量單位）進行盒模型橫向屬性（width、左右內邊距、左右外邊距）的製作，使用em（相對度量單位）實現文字的處理。但盒模型縱向上還是使用固定像素作為單位。但是，這種操作導致了一個問題——主要表現在img標簽的處理上。成都軟體開發公司標簽進行計算的。相比之下，rem的計算起來要簡單很多。於是，自己嘗試用rem解決橫向以及縱向的設置，舍棄掉了百分比，發現還是挺不錯的，算是兼容了絕大多數機型和瀏覽器。之後，在使用一款華為手機進行測試的時候，發現並不支持橫向的rem。於是，又需要想法啦~~~正解——橫向百分比，縱向rem針對華為手機，我嘗試了橫向百分比，發現還是能夠支持的，於是就折中了一下，橫向使用百分比進行控制，縱向使用rem作為單位。此時能夠實現所有瀏覽器的兼容。優化正解——橫向百分比，縱向rem在橫向使用百分比，縱向使用rem時，會由於計算產生一定的誤差，於是，運用學習過的一些HTML5技術，進行移動端頁面的優化，例如，使用CSS3的盒陰影替換掉邊框。而對於rem，在計算中通常是存在一定的字體誤差的（會計算出小數點），此時正好接觸了一下淘寶的移動端頁面，看到了一個不錯的JS框架——flexible.js，通過這個框架對頁面進行處理，能夠防止小數點的出現。關於flexible.js框架的具體用法，可點擊查看——移動端H5知識-處理rem小數點flexible.js優化正解2——任性的使用固定像素來實現上個月月初，發現網易移動端的製作方法有些特殊，查看代碼時發現，網易採用了固定像素進行書寫，而通過MetaHandler.js進行了頁面的控制。最近嘗試了一下，感覺還是挺不錯的，兼容也是比較好的，不失為一種好方法。關於MetaHandler.js框架的具體用法，可點擊查看——移動端H5知識-固定像素的實現方法
③ 如何用html5構建移動端的webapp
H5e教育html5開發為您解答：
移動web在當今的發展速度是一日千里，作為移動領域的門外漢，在這段時間的接觸後，發現前端開發這一塊做一個小小的總結。
1.四大瀏覽器內核
1.Trident (IE瀏覽器) :因為在早期IE佔有大量的市場份額，所以以前有很多網頁是根據這個Trident的標准來編寫的，但是實際上這個內核對真正的網頁標准支持不是很好，同時存在許多安全Bug。
2.Gecko:( FireFox )優點就是功能強大、豐富，可以支持很多復雜網頁效果和瀏覽器擴展介面，缺點是消耗很多的資源，比如內存。
3.Webkit: ( Chrome/ Safari / UC )優點就是Webkit擁有清晰的源碼結構、極快的渲染速度，缺點是對網頁代碼的兼容性較低，會使一些編寫不標準的網頁無法正確顯示。
4.Presto: ( 歐朋 ) Presto內核被稱為公認的瀏覽網頁速度最快的內核，同時也是處理JS腳本最兼容的內核，能在Windows、Mac及Linux操作系統下完美運行。
移動端開發主要對象是手持設備，其中絕大部分是IOS和Android系統，基於Webkit內核，可使用Chrome瀏覽器調試即可。
2.手機瀏覽器
瀏覽器已經逐漸從傳統桌面轉向手機端，競爭也越來越激烈。目前國內市場主流的手機瀏覽器：UC、網路、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基於webkit內核的，兼容性方面不存在問題，同時對html5和css3的支持很好，所以，大膽地應用html5和css3技術吧。
在開始編寫webapp時，前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序 的體驗，可以減少開發者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域 可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。
3.終端解析度
手機解析度比PC解析度要龐雜得多，各種解析度有木有？大小差距那麼大有木有？這在一定程度上給頁面製作帶來了不小的麻煩。所以針對這樣的因素，必須有充分的考慮。考慮到瀏覽器自適應，需要設計和製作完成各種不同的方法。
1) 市場上主流手機生產商的產品解析度。經過調研發現，目前主流的手機解析度為：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統計，要有精確的數據需要花費不少的精力，那是數據分析人員的工作。
2) 項目目標群所持設備的解析度。項目目標群即用戶，用戶擁有什麼樣的手機解析度，從一定程度上來說比第一點來得更加重要，它決定著項目開發的方向。
4.響應式web開發
在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。為達到適配各種手持設備，我建議前端工程師使用自適應布局模式（支付 寶 採用了自適應布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設備的解析度。
響應式web開發不是一項開創性的技術變革，簡單地說，響應式web設計採用了媒體查詢、流式布局、液態圖片三項技術，把它們組合在一起來製作頁面，使得頁面不只在傳統桌面，在平板電腦和手機上，各種不同的解析度都能夠完美顯示。而要做到這點，我覺得不難，請繼續往下：
1) 准備工作：
a) 插件安裝：window resize。您可以通過下載安裝谷歌瀏覽器插件，安裝成功後，當您調整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和類似於手機視圖的大小提示。
b) 編輯器安裝：Hbulder或Webstorm
c) 弄清視圖和屏幕的區別。視圖是瀏覽器的內容顯示區域，屏幕是設備的物理顯示區域。比如視圖寬度我們一般用width表示，而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經常見過這段代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。
d) 響應式設計創意網站收集 。這里有很多響應式Web設計的網站，供您參考和學習。
2) 征途ING：
e) 響應式web設計之媒體查詢：
為了減少http請求，我想在css樣式表裡進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行載入。樣式表裡的媒體查詢格式為：
@media screen and (max-width:960px){}
大括弧內部書寫樣式。該語句相當於判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen代表顯示屏，這兩個條件都具備了，就調用大括弧內的樣式。
f) 響應式web設計之流式布局：
流式布局以百分比進行布局。最重要是時刻關注元素的父級層，所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結合，形成平滑的布局變 化跳轉效果。一般而言，media里的樣式多以width、padding、margin、font-size、line-height這些為主。
g) 響應式web設計之液態圖片：
要實現液態圖片，只需加入如下代碼：img{max-width:100%;}
web移動頭部書寫
1、首先我們來看看webkit內核中的一些私有的meta標簽，這些meta標簽在開發webapp時起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
<meta content="yes」 name=" apple-mobile-web-app-capable" />
meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
<meta content="telephone=no" name="format-detection" />
meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼
④ jquery mobile可以使用jqueryui嗎
樓主如果用到jquery mb的話，那麼比較推薦就使用他內部的樣式就好了,MB一般用於開發移動端視口，而ui更多的是用於桌面端瀏覽器視口，當然也會在移動端有自適應，但是效果沒有MB好，所以二者應該是不必混為一談的，MB貌似很久沒碰了，以前用它做過一個小的WEB APP ，感覺還是有點不好用，所以放棄了。
⑤ 如何進行移動端的頁面開發
應該說，移動端的開發是伴隨著HTML5的興起而出現的，2007年第一款iPhone誕生，2009年HTML5這個名詞第一次登上「舞台」。當時的移動互聯網開始逐漸興起，發展到今，移動互聯網已經和人們的日常生活密切相關。作為開發者，對於一個嶄新的事物，一直在嘗試的「路上」，到底最好的開發方式是什麼？本文介紹了從移動端誕生到現在，自己探索到的開發方法，並配以相應知識點，歡迎跟大家溝通、分享。
初次接觸移動端，絕對單位的使用
自己接觸移動端開發是在2012年，那時候比較新潮的是製作WEB APP。什麼是WEB APP呢？所謂的WEB APP就是用網頁模擬出原生語言（如iOS）開發的APP交互效果。雖然在表現層面上，HTML5表現突出，但不得不承認的是，在系統性能層面，WEB APP明顯要差於原生應用（即Native APP）。這也就使得WEB APP這條路暫時性的被堵住了。
於是，移動端的開發方向逐漸向移動端網頁傾斜。對於PC端，我們一直使用的是px（像素）進行代碼的書寫，但是到了移動端，需要面臨不同的解析度。在2012年的時候，自己和團隊成員在寫移動端的時候，由於是初次接觸，還是在使用px（像素）作為單位。因為在2012年的時候，絕大多數的手機的屏幕大小都是320*480解析度，所以，即便是使用像素作為單位進行移動端網頁開發也是完全可以的。
關於視口的知識，可點擊查看——移動端H5知識-視口viewport
橫向百分比，縱向像素值
隨著移動端的繼續發展，在2012年9月，iPhone5上市，開始引領「特殊解析度」的發展，於是，320*480解析度的手機屏幕在整個手機市場當中佔有的份額越來越少，各種各樣的解析度如雨後春筍般冒了出來。
此時我們再進行固定像素進行開發明顯是不明智的。於是，我們開始採用百分比（相對度量單位）進行盒模型橫向屬性（width、左右內邊距、左右外邊距）的製作，使用em（相對度量單位）實現文字的處理。但盒模型縱向上還是使用固定像素作為單位。
但是，這種操作導致了一個問題——主要表現在img標簽的處理上。成都軟體開發公司http://www.yingtaow.com?對於圖片來說，只需要設置橫向百分比，縱向會自動等比例縮放。在列表頁以及內容頁還好，畢竟內容是自動撐開父級高度的；但是在首頁或者二級頁，但凡涉及到父級元素高度固定的盒模型，裡面的img就會出現變形（壓縮或者拉伸）的問題。
這個問題也是困擾了自己許久，但是一直沒有找到一個非常好的解決辦法。
響應式布局
當自己還在糾結img的處理時，2013年，在北京流行起了一種新的技術——響應式布局。通過媒體查詢，針對不同大小解析度的設備，設置不同的樣式。應該說，對移動端頁面的開發幫助不大，原因在於，響應式的出現主要是因為我們希望一段代碼能夠同時適配PC端、平板電腦以及手機。由於三種平台的樣式以及用戶體驗應該是迥然不同的，那麼此時，我們就需要有「斷點」，在不同位置，有不同的樣式，而在兩個「斷點」之間的樣式，則使用相對單位做「漸變性的過渡」。
應該說，響應式布局解決了典型的屏幕像素不同樣式的問題，但是卻依舊搞定不了之前的那個問題。
關於CSS3媒體查詢的知識，可點擊查看——移動端H5知識-CSS3媒體查詢
橫向縱向均百分比
在橫向百分比，縱向像素值的方法無效時，自己能夠想到的就是縱向也設置為百分比了，但是卻發現，盒模型屬性在縱向上的一些設置上是存在問題的，如padding-top/bottom、margin-top/bottom等。而文本屬性中line-height在設置百分比時也並不是按照當前元素高度計算的。
於是，橫縱向均設置為百分比的方法就破滅了~
關於盒模型的一些問題以及背景的合理使用，可點擊查看——移動端H5知識-百變盒模型以及移動端H5知識-背景的妙用
橫向縱向rem
隨著HTML5的發展，除了原來的em單位，又新增了rem單位。這兩個單位都是相對單位。1em表示的是當前元素一個字體大小的尺寸；而1rem，也表示的是一個字體大小的尺寸，但是是針對html標簽進行計算的。相比之下，rem的計算起來要簡單很多。於是，自己嘗試用rem解決橫向以及縱向的設置，舍棄掉了百分比，發現還是挺不錯的，算是兼容了絕大多數機型和瀏覽器。之後，在使用一款華為手機進行測試的時候，發現並不支持橫向的rem。於是，又需要想辦法啦~~~
正解 —— 橫向百分比，縱向rem
針對華為手機，我嘗試了橫向百分比，發現還是能夠支持的，於是就折中了一下，橫向使用百分比進行控制，縱向使用rem作為單位。此時能夠實現所有瀏覽器的兼容。
優化正解 —— 橫向百分比，縱向rem
在橫向使用百分比，縱向使用rem時，會由於計算產生一定的誤差，於是，運用學習過的一些HTML5技術，進行移動端頁面的優化，例如，使用CSS3的盒陰影替換掉邊框。而對於rem，在計算中通常是存在一定的字體誤差的（會計算出小數點），此時正好接觸了一下淘寶的移動端頁面，看到了一個不錯的JS框架——flexible.js，通過這個框架對頁面進行處理，能夠防止小數點的出現。
關於flexible.js框架的具體用法，可點擊查看——移動端H5知識-處理rem小數點 flexible.js
優化正解2 —— 任性的使用固定像素來實現
上個月月初，發現網易移動端的製作方法有些特殊，查看代碼時發現，網易採用了固定像素進行書寫，而通過MetaHandler.js進行了頁面的控制。最近嘗試了一下，感覺還是挺不錯的，兼容也是比較好的，不失為一種好方法。
關於MetaHandler.js框架的具體用法，可點擊查看——移動端H5知識-固定像素的實現方法
⑥ HTML5如何利用rem實現自適應布局
分析設計圖
假設設計圖大小為1080px。這也就意味著，在開發時，需要兼容的最大解析度為1080px，最小的為320px。
2.調整視口
代碼實例：
<!DOCTYPEhtml>
<head>
<metacharset="UTF-8"/>
<title>布局之路-移動端開發實例</title>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="css/reset.css"/>
</head>
<body>
<divclass="wrap"></div>
</body>
</html>
代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。
3. 確定設計圖的最小字體
瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。
代碼實例：
<styletype="text/css">
html{
font-size:42px;
}
</style>
4. 按照設計圖的像素進行開發
按照正常網頁開發流程，進行網頁開發即可。
5. 使用百分比和rem替換px
代碼效果對比：
/*使用固定像素*/
.box{
float:left;
width:658px;
font-size:72px;
text-align:center;
line-height:195px;
}
/*使用百分比和rem*/
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}
代碼解析：
水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。
例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。
垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。
⑦ 移動端html5移動開發的歡迎頁面怎麼寫入場歡迎頁面怎麼寫
自己接觸來移動端開發是在源2012年，那時候比較新潮的是製作WEB APP。什麼是WEB APP呢？所謂的WEB APP就是用網頁模擬出原生語言（如iOS）開發的APP交互效果。雖然在表現層面上，HTML5表現突出，但不得不承認的是，在系統性能層面，WEB APP明顯要差於原生應用（即Native APP）。這也就使得WEB APP這條路暫時性的被堵住了。
於是，移動端的開發方向逐漸向移動端網頁傾斜。對於PC端，我們一直使用的是px（像素）進行代碼的書寫，但是到了移動端，需要面臨不同的解析度。在2012年的時候，自己和團隊成員在寫移動端的時候，由於是初次接觸，還是在使用px（像素）作為單位。因為在2012年的時候，絕大多數的手機的屏幕大小都是320*480解析度，所以，即便是使用像素作為單位進行移動端網頁開發也是完全可以的。
關於視口的知識，可點擊查看——移動端H5知識-視口viewport
⑧ 移動頁面尺寸
<div class="wrap">
<img src="img02.jpg" width="340" height="220" alt="" />
<a href="">按鈕</a>
</div>
<style>
.wrap{position:relative;margin:0 auto; min-width:320px;width:100%;}
.wrap img{width:100%;height:auto;}
a{position: absolute;bottom:20px;right:20px;height:40px;padding:0 20px;line-height:40px;background:#A6DA32;color:#461DCD;}
</style>
在wrap設置相對定位position:relative;然後讓按鈕a絕對定位bottom:20px;right:20px;就可以了 當然也可以用百分百bottom:10%;right:10%;意思就是相對於wrap的右邊多少像素或者百分比,相對於下邊多少像素或者百分比
如果你想更精確的區分移動端和pc端可以用響應式布局代碼判斷
/*PC*/
@media screen and (min-width:960px){
a{bottom:20px;right:20px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
a{bottom:15px;right:15px;}
}
/*手機*/
@media screen and (max-width:600px){
a{bottom:10px;right:10px;}
}
在第一個裡面寫在寬度大於960時候所用的css
在第二個裡面寫想要在寬度大於600並且小於960時候所用的css
在第三個裡面寫你要在寬度小於600時候所用的css
意思是檔瀏覽器大於960的時候a按鈕的屬性是bottom:20px;right:20px;
當你將瀏覽器拉小到960一下600以上的時候就使用bottom:15px;right:15px;
當瀏覽器小於600的時候a按鈕的屬性就是bottom:10px;right:10px;
當然如果想使用響應式布局必須聲明頁頭的
<!DOCTYPE html>
和
<meta name="viewport" content="width=device-width, initial-scale=1.0">
⑨ html如何固定頁面
這個需要適配一下移動端的
1、需要在某部加上視口代碼：
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1">
2、移動端字體大小內不能用px而需要rem這種相對單位才能適容配
⑩ 判斷訪問的是pc還是移動端然後調用不同的css樣式
第一種方式：利用js判斷設備類型，應用不同樣式文件
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS判斷設備類型，應用不同css文件</title>
<linkrel="stylesheet"type="text/css"href="style_A.css"/>
</head>
<body>
<div>
</div>
<scripttype="text/javascript">
varbrowser={
versions:function(){
varu=navigator.userAgent,app=navigator.appVersion;
//移動設備瀏覽器版本信息
return{
//IE內核
trident:u.indexOf('Trident')>-1,
//opera內核
presto:u.indexOf('Presto')>-1,
//蘋果、谷歌內核
webKit:u.indexOf('AppleWebKit')>-1,
//火狐內核
gecko:u.indexOf('Gecko')>-1&&u.indexOf('KHTML')==-1,
//是否為移動終端
mobile:!!u.match(/AppleWebKit.*Mobile.*/),
//ios終端
ios:!!u.match(/(i[^;]+;(U;)?CPU.+MacOSX/),
//android終端或者uc瀏覽器
android:u.indexOf('Android')>-1||u.indexOf('Linux')>-1,
//是否為iPhone或者QQHD瀏覽器
iPhone:u.indexOf('iPhone')>-1,
//是否iPad
iPad:u.indexOf('iPad')>-1,
//是否web應該程序，沒有頭部與底部
webApp:u.indexOf('Safari')==-1
};
}(),
language:(navigator.browserLanguage||navigator.language).toLowerCase()
}
if(browser.versions.mobile||browser.versions.ios||browser.versions.android||browser.versions.iPhone||browser.versions.iPad){ cssChange();
}
functioncssChange(){
varlink=document.getElementsByTagName('link')[0];
//PC端應用的樣式文件：style_A.css
alert('當前應用樣式文件是：'+link.getAttribute('href'));
link.setAttribute('href','style_B.css');
//Mobile端應用樣式文件：style_B.css
alert('當前應用樣式文件是：'+link.getAttribute('href'));
}
</script>
</body>
</html>
第二種方式：利用css3的媒體查詢，在不同的解析度下，調用不同的css文件
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用媒體查詢做自適應頁面</title>
<!--添加視口-->
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="styleA.css"media="screenand(min-width:320px)and(max-width:480px)">
<linkrel="stylesheet"type="text/css"href="styleB.css"media="screenand(min-width:480px)and(max-width:600px)">
<linkrel="stylesheet"type="text/css"href="styleC.css"media="screenand(min-width:600px)and(max-width:800px)">
<linkrel="stylesheet"type="text/css"href="styleD.css"media="screenand(min-width:800px)">
<!--
創建4個css文件，
styleA.css中樣式為//.div_1{width:320px;border:1pxsolidred}
styleB.css中樣式為//.div_1{width:480px;border:1pxsolidblue}
styleC.css中樣式為//.div_1{width:600px;border:1pxsolidpink}
styleD.css中樣式為//.div_1{width:800px;border:1pxsolidblack}
-->
</head>
<body>
<divclass="div_1">
我是Body下的第一個Div元素
</div>
<!--
當屏幕寬度介於320px與480px之間時div元素寬度為320px,邊框為紅色
當屏幕寬度介於480px與600px之間時div元素寬度為480px,邊框為藍色
當屏幕寬度介於600px與800px之間時div元素寬度為600px,邊框為粉色
當屏幕寬度大於800px時div元素寬度為800px,邊框為黑色
-->
</body>
</html>