http://bbs.php100.com/read-htm-tid-482066.html

目前有很多不錯的mobile開發框架可以使用，這些框架已經為手機端的特殊性提供了很好的支持和效果插件，比如：jquery mobile、kendoui等~~

不過，謝謝框架因為其開源性或商業化，可能你學習和認知起來會有一定的時間，維護起來會有一定的困難。另外，通過一段時間的項目實驗，我發現，這些框架的【個性化】比較少，也就是說，它提供的樣式就是最終的樣式了，你修改他的樣式最終做出符合自己效果圖的東西還是比較困難的。也就是說：使用框架進行批量生產可以，制作個性站點就有點復雜！

那么我是制作方法就是自己去按寫網頁的方法去寫手機端的頁面。這需要注意幾個方面：

1.添加特定的meta信息：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" />
上述的幾個meta信息，第一個是設定手機端的屏幕尺寸的，第二個是設定iphone端頁面全屏的，第三個則是取消數字被識別為電話號碼的！當然，還有其他很多，你可以google一下，我的項目中通常只用到這幾個而已！

第一個meta寫法就可以到達你要的效果！…………

2.圖片分辨率

大家都知道手機端屏幕目前來說大部分都是視網膜屏幕，普通的圖片顯示起來通常會變的比較模糊，通常的做法就是把圖片設置為雙倍，顯示為正常，比如:我要顯示200*100的圖片，那么我可以做一個400*200的圖片，然后在調用的時候寫：<img src="123.jpg" style="width:200px;height:100px;" alt="" />這樣圖片被縮小一倍后就顯示的清楚了。

css中圖片，通常也需要設置一下background-size屬性，常用的就是cover、0px 100%;等這樣的值，他主要實現等比縮放、單向縮放。比如，我有一個圖標，是使用的背景，該元素的尺寸是20*20，圖片文件的尺寸是40*40，那么，可以在css中這樣細寫：
.aa {width:20px;height:20px;background:url(images/aa.png) no-repeat center top; background-size:cover;}
但是，如果寫一個漸變效果，或者帶紋理的效果，那就需要使用到單邊縮放了，也就是一個方向保持原始的尺寸，一個方向拉伸為指定的尺寸。

3.字體字號

可以繼續沿用PC網頁中的12、14、16、18px這樣的設置，以16px為基準就可以了（始終的大小），12號最小，用于說明類的信息。特殊字號統一設定。

4.css3

圓角、投影、背景透明度還是需要使用css3的。這些東西也通常寫到一個獨立的文件中，因為他要涉及很多寫法，太過分散不宜維護，例如：

#aa,.bb,span {border-radius:5px; ?-webkit-border-radius:5px; ?-moz-border-radius:5px; ?-o-border-radius:5px;}

5.滾動條

手機端不支持css的滾動條屬性，也就是，平時我們在電腦端設定一個容器的內容溢出后出現滾動條，但是手機端不會。利用手機端的滾動條有多種方法，
第一種是犧牲站點效果，使用通頁布局，這個就是像平時的網頁一樣，一個很長很長的頁面，這樣系統就有滾動條的。模擬全屏應用就沒辦法了。

第二種是使用iscroll插件，他可以配合你的框架設定方法來完成一個全屏app的設計，比如：你設定頭部、頁腳的尺寸和固定位置，然后，用js動態設定內容區域的寬度就可以了，然后給內容區域設定滾動條。

6.觸屏事件 touchstart、touchmove、touchend

觸屏事件是手機端專有的js事件，他可以用來制作很多東西，通常手機端的拖動幻燈片、slider控件等都需要用到拖動事件，不過，拖動事件的調用方法是這樣的：
復制代碼
$(document).ready(function(){var inX,inY,deX,deY,touch2,canDrag;//按下document.getElementById("tba").addEventListener("touchstart",function(e){var touch = e.targetTouches[0];canDrag = true;$("#debug ul").append('<li>觸摸開始...</li>');$("#tba").addClass("tba_down");//元素自身位置var dePos = $("#tba").position();deX = dePos.left;deY = dePos.top;//按下時的位置inX = touch.pageX - deX;inY = touch.pageY - deY;$("#posa").text(touch.pageX + ":" + touch.pageY);//拖放document.getElementById("tba").addEventListener("touchmove",function(e){if(canDrag){var touch2 = e.targetTouches[0];e.preventDefault();$("#posb").text(touch2.screenX + ":" + touch2.screenY);$("#tba").css({left:touch2.screenX - inX,top:touch2.screenY - inY});}});});//松開document.getElementById("tba").addEventListener("touchend",function(e){$("#debug ul").append('<li>觸摸結束...</li>');$("#tba").animate({left:"0px",top:"0px"});$("#tba").removeClass();canDrag = false;}); ...... .....
具體的用法個人還沒有研究。不過你也是可以使用第三方插件完成的，比如：http://www.jqueryrain.com/2012/07/flipsnap-js-snap-scroll-for-touch-device/

7.行高line-height

有款瀏覽器叫歐朋瀏覽器。這貨不支持圓角、不支持投影、不支持行高，他只支持類似wap的網頁界面。而系統原生的瀏覽器以及一些大的知名手機瀏覽器對上述東西的支持還是比較好的。但是，因為手機瀏覽器設計的各異，很多方法和效果可能在不同的瀏覽器上有不同的使用效果，比如：UC瀏覽器的左右滑動翻頁，百度瀏覽器的向上滑動關閉等，他們很有可能和我們自身設計的方法沖突，導致頁面被錯誤的關閉等....

總結：
手機端的頁面和電腦端的頁面一樣，也可以分為普通樣式和個性樣式，普通樣式的話，能夠支持大多數的瀏覽器。模擬app就稍微麻煩一些，需要給頁面引用大量的js效果，這包括頁面加載、系統控件等，有些手機瀏覽器幫我們完成了，有些則需要手動設計，完完全全的模擬手機app還是比較復雜的（模擬不如直接基于SDK開發一個）。


OK，發一個自己做的項目截圖：

總結

以上是生活随笔為你收集整理的网页如何做到适应在手机上浏览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。