!!!手机网页开发
乐视1s 屏幕：1080x1920 （实际显示:393x675） safari4.0 2015-12-3
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 使用Flexible实现手淘H5页面的终端适配（里面有多种终端尺寸！） 2015-12-11
http://www.bootcdn.cn/fastclick/ github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应（有时间再看）https://github.com/ftlabs/fastclick 2015-10-15
http://www.cnblogs.com/mofish/p/4332937.html 手机网页字体 2015-10-20
http://ued.taobao.org/blog/2013/05/rem-font-size/ REM 字体 2015-10-20
http://www.uis.cc/content-9-367-1.html 移动前端系列——移动端页面坑与排坑技巧 2015-10-21
http://www.cnblogs.com/PeunZhang/p/4517864.html 让H5适配移动设备全家(移动端适配) 2015-11-19
http://www.uis.cc/2015/11/27/Mobile-terminal-bug-summary/ 移动端开发经验小结 2015-12-12
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="pragma" content="no-cache" /> </head> <body> <h1>手机网页</h1> </body> </html>
webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
(2)<meta content="yes" name="apple-mobile-web-app-capable" />
(3)<meta content="black" name="apple-mobile-web-app-status-bar-style" />
(4)<meta content="telephone=no" name="format-detection" />
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
http://segmentfault.com/a/1190000002407912 [扩展阅读] 常用meta整理
移动篇：
//window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 //公式表示就是：window.devicePixelRatio = 物理像素 / dips var a=window.devicePixelRatio;
[扩展阅读]： http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 设备像素比devicePixelRatio简单介绍
手机：
@media screen and (min-width:720px){ .zxlc-head {height:345px;}}
@media screen and (max-width:720px){ .zxlc-head {height:345px;}}
@media screen and (max-width:540px){ .zxlc-head {height:258px;}}
@media screen and (max-width:360px){ .zxlc-head {height:172px;}}
@media screen and (max-width:320px){ .zxlc-head {height:153px;}}
PC：
@media screen and (min-width:1024px){ .nav-bottom {height:27px;}}
@media screen and (max-width:1280px){ .nav-bottom {height:36px;}}
@media screen and (max-width:1440px){ .nav-bottom {height:40px;}}
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="css479.css" /> 示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。
CSS中直接设置：
@media screen and (max-width:479px) {
/* 具体的CSS属性设置 */
}
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （强制显示真实分辨率大小）
width=device-width：控制viewport的宽度，可以指定固定的值或者特殊的值，如device-width（设备宽度）。但是这个么设置有一个弊端，因为这个设置只有在竖屏状态下有效，横屏状态下，返回的却还是和竖屏状态下一样的宽度。
initial-scale=1.0：告诉浏览器初始化页面时不要对页面进行任何缩放的操作。
maximum-scale=1.0：告诉浏览器阻止页面放大，但是这样一来也禁止了用户手动放大或缩小页面，怎么说呢，美好的东西也会存在缺陷吧。
minimum-scale=1.0：告诉浏览器阻止页面缩小，同样带来上面的问题。
user-scalable=no：告诉浏览器禁止页面缩放。
target-densitydpi=device-dpi：分辨率的设置，通常可以取值：device-dpi（使用设备自身的dpi作为目标dp，不发生缩放）、high-dpi（使用高分辨率，中低分辨率场景下会相应缩小）、medium-dpi（使用中等分辨率，高低分辨率分别进行相应的放大和缩小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相应放大）。
通过对viewport的设置，利用Media Queries的属性设置，你就可以做出响应式的Web页面。下面开始一步一步告诉你响应式Web设计怎么开始的：
允许网页宽度自动调整：
就是在网页的中追加viewport meta的定义。
选取一个标准开发出具体页面：
比如一个页面被要求对屏幕宽度为320px、480px、640px的三种场景下进行响应式设计，这个时候正常会选取320px下的标准先进行页面开发。
抽取最低标准下的CSS样式独立成外链样式文件：
将320px下的CSS样式全部抽取成外链样式文件，响应式设计的页面HTML代码中，不要有任何CSS定义的代码。
根据UEDMMs的视觉稿进行其他标准的CSS样式文件开发。
通过Media Queries属性设置来定义不同场景下加载不同的CSS样式文件。
http://blog.csdn.net/iamjiuye/article/details/11608927
适应高分辨率大屏手机的方法：
按照540px写网页。再加一句（可自动缩放）：
//适应高分辨率手机 $(window).on("resize load",function(){ $("body").css("zoom", $(window).width() / 540); $("body").css("display" , "block"); });
【旁白】
这段时间在做应用中嵌入网页，被嵌入的网页总被缩放，非常烦恼。 让安卓工程师加上此句后：webSettings.setSupportZoom(false); 仍旧还是被缩放。（比如540宽的手机，观看网页时页面宽度是345px）——继续烦恼! <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （ 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小） 页面所有字号大小，都只按照某一宽度的来做。 比如设计图页面宽度540的，就都按540px切图做页面，不考虑其它分辨率的自适应。
再加上下面这段代码，然后所有不同分辨率的手机，都按540px缩放： $(window).bind('resize load', function(){ $("body").css("zoom", $(window).width() / 540); $("body").css("display" , "block"); }); 就解决了大屏手机高分辨率下，字体过小的问题。而且切图时也不用考虑多种分辨率的不同css，统统按只支持540px的做就足矣！
var screenWidth=$(document).width();
日记：
前一段时间做手机网页，被嵌入到安卓和IOS中。上文所述的强制用js缩放的方法行不通，还得靠webview自己的缩放。
因为有很多手机的 视网膜不是1，像IOS的iphone4s是2，就是说，640x960，但实际页面像素宽度是320x480
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .header{} }
window.devicePixelRatio
所以META头改成这样了：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="pragma" content="no-cache" />
请提供ios开发需要的
app的图标和启动图片，单位是像素
图标 ：29x29 57x57 58x58 80x80 114x114 120x120
启动图 ：320x480 640x960 640x1136
touch 事件 （Touch Event）
http://www.w3.org/TR/touch-events/#list-of-touchevent-types W3C（Touch Event）标准文档 2013-10-10 发布
touchstart 触摸开始（手指放在触摸屏上）
touchmove 拖动（手指在触摸屏上移动）
touchend 触摸结束（手指从触摸屏上移开）
touchcancel 是在拖动中断时候触发
interface Touch { readonly attribute long identifier; readonly attribute EventTarget target; readonly attribute long screenX; readonly attribute long screenY; readonly attribute long clientX; readonly attribute long clientY; readonly attribute long pageX; readonly attribute long pageY; };
$("#screen").on("touchstart",function(e){
console.log(e.originalEvent);
});
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#abc").bind("touchstart",function(){ console.log("touchstart"); }); $("#abc").bind("touchend",function(){ console.log("touchend"); }); $("#abc").bind("touchmove",function(){ console.log("touchmove"); }); $("#abc").bind("touchcancel",function(){ console.log("touchcancel"); }); }); </script>
http://www.w3cplus.com/source/jquery-plugins-that-handle-touch-events-43-items.html 43个处理触摸事件的jQuery插件（看第13条）
https://github.com/furf/jquery-ui-touch-punch 第13条：jquery-ui-touch-punch
http://www.cnblogs.com/lilyimage/p/3951016.html touch.js
扩展阅读：
http://www.iteye.com/news/26171 Phone 5/iOS 6 前端开发指南 2014-6-24
http://www.w3cplus.com/css/towards-retina-web.html 走向视网膜 2014-6-24
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 设备像素比devicePixelRatio简单介绍 2014-6-24
http://xiaofengyu.iteye.com/blog/1973764 HTML5移动开发技术要点总结及各事件含义 2014-6-24
http://blog.csdn.net/heavensoft/article/details/37920595 让HTML5达到原生的体验 系列之一 避免切页白屏 2014-7-23
http://blog.163.com/xz551@126/blog/static/821257972012722112636769/ wap页面手机网站触屏事件 按下 松开 滑动
http://www.vipaq.com/Article/View/blog/390.html 移动web开发，12个触摸及多点触摸事件常用Js插件
http://www.cnblogs.com/lecaf/archive/2011/08/01/2123593.html JS新API标准 地理定位（navigator.geolocation）
https://github.com/madrobby/zepto/tree/master/src Zepto 2014-09-10
http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html Android中webview和js之间的交互
http://www.genymotion.cn genymotion模拟器
关于phoneGap
build.phonegap.com
http://www.phonegap100.com/ phonegap中文网
2015-10 手机网页开发2
<meta name="full-screen" content="yes"><!-- UC强制全屏 --> <meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 --> <meta name="browsermode" content="application"><!-- UC应用模式 --> <meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
页脚三按钮实例：
<style type="text/css"> body { min-width: 320px; font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei; color: #000; background: #f2f2f2; overflow-x: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: none; -moz-user-select: none; } article, aside, footer, header, hgroup, main, nav, section {display: block;} .tool-box {padding-bottom: 5px;border-top: 1px solid #CCCCCC;text-align: center;} .tool-cn {margin-bottom: 5px;height: 49px;background-color: #fff;border-bottom: 1px solid #c2c2c2;text-align: center;overflow: hidden;} .tool-cn a {position: relative;float: left;padding-top: 26px;color: #333;font-size: 12px;} .tool-cn a:before{background: url(http://webresource.c-ctrip.com/ResCRMOnline/R5/html5/images/un_ico_home_v66.png) no-repeat 0 0;background-size: 104px 326px;} .tool-cn a:before {content: "\0020";position: absolute;top: 7px;left: 50%;margin-left: -8px;width: 16px;height: 17px;} .tool-cn a.link-1 {width: 38%;} .tool-cn .link-1:before {background-position: -60px -153px;} .tool-cn a.link-2 {width: 32%;} .tool-cn .link-2:before {background-position: -60px -173px;} .tool-cn a.link-3 {width: 30%;text-indent: 4px;} .tool-cn .link-3:before {width: 18px;height: 18px;background-position: -60px -308px;} </style> <footer class="tool-box"> <div class="tool-cn"> <a href="tel:00000" class="link-1" rel="nofollow">电话预订</a> <a href="http://m.ctrip.com/m/c67" class="link-2" rel="nofollow">下载客户端</a> <a href="/webapp/myctrip/" class="link-3" rel="nofollow"><i></i>我 的</a> </div> </footer>