开源软件名称（OpenSource Name）： hoosin/mobile-web-favorites开源软件地址(OpenSource Url)： https://github.com/hoosin/mobile-web-favorites开源编程语言(OpenSource Language)： 开源软件介绍(OpenSource Introduction)： 移动前端开发收藏夹，欢迎使用 Issues 以及 Pull Request
贡献者名单：https://github.com/hoosin/mobile-web-favorites/graphs/contributors
腾讯移动Web前端知识库
maxzhang博客
QQ浏览器X5内核问题汇总
html5与css3技术应用评估
各种奇妙的hack
几乎所有设备的屏幕尺寸与像素密度表
移动设备参数表
ios端移动设备参数速查
浏览器兼容表
移动设备查询器
移动设备适配库
viewport与设备尺寸在线检测器
html5移动端兼容性速查
在线转换字体
css3选择器测试
兼容性速查表
浏览器的一些独特参数
各种各样的媒体查询收集
css3动画在线制作器
css3渐变在线制作器
移动端手势表
webkit独有的样式分析
Firefox 浏览器内置了 自定义设计视图 的功能，可以通过 Firefox->Web 开发者->自定义设计视图（或者摁下 Shift + Ctrl + m ）。相比网络工具，运行更加流畅，无需联网。
判断 iPad 和 iPhone 的版本和状态的 CSS 媒体查询代码
Viewport Resizer
screenqueri
responsivepx
responsinator
resizemybrowser
quirktools
原文
当前 WEB APP 开发的最佳实践
移动Web单页应用开发实践——页面结构化
移动Web产品前端开发口诀——“快”
移动Web开发，4行代码检测浏览器是否支持position:fixed
使用border-image实现类似iOS7的1px底边
移动端web页面使用position:fixed问题总结
移动Web开发实践——解决position:fixed自适应BUG
移动手机浏览器m3u8格式视频流播放支持程度测试
meta开始本节之后可能也涉及 meta 标签，但为了更加全面的摸透 meta 特地用一节的篇幅来系统概述。
说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。
用法：
< meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 " />注意：该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。
也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。
实际上我们可以操作的属性有 4 个：
width – // viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – // viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – // 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no，yes)
< meta name ="viewport " content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no " />说明：
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度
body {
min-width : 320px ;
}< meta name ="format-detection " content ="telephone=no " />说明：
使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
< meta name ="apple-mobile-web-app-capable " content ="yes " />说明：
< meta name ="apple-mobile-web-app-status-bar-style " content ="black " />说明：
在 web app 应用下状态条（屏幕顶部条）的颜色；
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。
< meta name ="author " contect ="liudanyun, [email protected] " />当然，配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：
< link rel ="apple-touch-icon-precomposed " href ="iphone_logo.png " />说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径。
使用：
< link rel ="apple-touch-startup-image " href ="logo_startup.png " />说明：这个 link 就是设置启动时候的界面。
使用：
关于 link 方面还有更多的参数设置（例如：iPod、iPad、iPhone 不同尺寸不同图标），可以查看官方标准文档：Configuring Web Applications
对于Touch的处理
处理简单手势
处理复杂手势
meta标签，这些meta标签在开发webapp时起到非常重要的作用
< meta content ="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0 " name ="viewport " />
< meta content ="yes " name ="apple-mobile-web-app-capable " />
< meta content ="black " name ="apple-mobile-web-app-status-bar-style " />
< meta content ="telephone=no " name ="format-detection " />第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
注意根据public_00 提供的资料补充，content使用分号作为分隔，在老的浏览器是支持的，但不是规范写法。
规范的写法应该是使用逗号分隔，参考:
tip1 | tip2
其中：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。
关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，
是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。
当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。
(请参考：指尖的下JS 系列文章)
此像素非彼像素
对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。
在移动浏览器中对触摸事件的响应顺序应当是：
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。
使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下
-webkit-tap-highlight-color : rgba (0 , 0 , 0 , 0 );如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟一个click事件，并且不能发生touchmove事件，或者用zepto中的tap（轻击）事件。
body {-webkit-overflow-scrolling : touch;}用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧？不过如果是一个div，然后设置height:200px;overflow:auto;的话，可以滚动但是完全没有那滑动效果，很郁闷吧？
我看到很多网站为了实现这一效果，用了第三方类库，最常用的是iscroll（包括新浪手机页，百度等）
我一开始也使用，不过自从用了-webkit-overflow-scrolling: touch;样式后，就完全可以抛弃第三方类库了，把它加在body{}区域，所有的overflow需要滚动的都可以生效了。
< link rel ="apple-touch-icon-precomposed " href ="http://www.xxx.com/App_icon_114.png " />
< link rel ="apple-touch-icon-precomposed " sizes ="72x72 " href ="http://www.xxx.com/App_icon_72.png " />
< link rel ="apple-touch-icon-precomposed " sizes ="114x114 " href ="http://www.xxx.com/App_icon_114.png " />这个属性是当用户把连接保存到手机桌面时使用的图标，如果不设置，则会用网页的截图。有了这，就可以让你的网页像APP一样存在手机里了
< link rel ="apple-touch-startup-image " href ="/img/startup.png " />这个是APP启动画面图片，用途和上面的类似，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素
< meta name ="apple-mobile-web-app-status-bar-style " content ="black-translucent " />这个描述是表示打开的web app的最上面的时间、信号栏是黑色的，当然也可以设置其它参数，详细参数说明在：Supported Meta Tags
< meta name ="apple-touch-fullscreen " content ="yes " />
< meta name ="apple-mobile-web-app-capable " content ="yes " />这2个描述也很有用的，如果没有它，你的web app会用safari浏览器打开，有了它，就会用独立进程的无地址栏的打开，完全可以和普通的APP比拟了
下面还有个不错的css，是用来区分视网膜屏幕的，这样你可以在iphone这样的手机里载入2x的图片，就不会模糊了
@media only screen and (-webkit-min-device-pixel-ratio : 1.5 ), only screen and (min--moz-device-pixel-ratio : 1.5 ), only screen and (min-device-pixel-ratio : 1.5 ), only screen and (min-resolution : 200dpi )
{
# logo {background-image : url ([email protected] );}
}< link rel =”apple-touch-startup-image” href =”startup.png” /> // 设置开始页面图片
< link rel =”apple-touch-icon” href =”iphon_tetris_icon.png”/ > // 在设置书签的时候可以显示好看的图标
< link rel ="stylesheet " media ="all and (orientation:portrait) " href ="portrait.css "> // 肖像模式样式
< link rel ="stylesheet " media ="all and (orientation:landscape) "href ="landscape.css " // 风景模式样式
//竖屏时使用的样式
< style media ="all and (orientation:portrait) " type ="text/css ">
# landscape { display : none; }
</ style >
//横屏时使用的样式
< style media ="all and (orientation:landscape) " type ="text/css ">
# portrait { display : none; }
</ style > 手机浏览器常用手势动作监听封装
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX // Relative to the screen
screenY // Relative to the screen
pageX // Relative to the full page (includes scrolling)
pageY // Relative to the full page (includes scrolling)
target // Node the touch event originated from
identifier // An identifying number, unique to each touch event
屏幕旋转事件：onorientationchange
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
function orientationChange ( ) {
switch ( window . orientation ) {
case 0 :
alert ( "肖像模式 0,screen-width: " + screen . width + "; screen-height:" + screen . height ) ;
break ;
case - 90 :
alert ( "左旋 -90,screen-width: " + screen . width + "; screen-height:" + screen . height ) ;
break ;
case 90 :
alert ( "右旋 90,screen-width: " + screen . width + "; screen-height:" + screen . height ) ;
break ;
case 180 :
alert ( "风景模式 180,screen-width: " + screen . width + "; screen-height:" + screen . height ) ;
break ;
} ;
} ; addEventListener ( 'load' , function ( ) {
orientationChange ( ) ;
window . onorientationchange = orientationChange ;
} ) ; // 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现
addEventListener ( 'load' , function ( ) {
setTimeout ( function ( ) { window . scrollTo ( 0 , 1 ) ; } , 100 ) ;
} ) ; // 双手指滑动事件
addEventListener ( 'load' , function ( ) { window . onmousewheel = twoFingerScroll ; } ,
false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
) ;
function twoFingerScroll ( ev ) {
var delta = ev . wheelDelta / 120 ; //对 delta 值进行判断(比如
客服电话
APP下载
官方微信
请发表评论