网页如何做到适应在手机上浏览

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，发一个自己做的项目截图：