html5⼿机常见问题与⼯具分享
mobileTech
A useful tools or tips list for mobile web application developing
这个项⽬收集移动端开发所需要的⼀些资源与⼩技巧
⼯具类⽹站
iphone6的那些事
响应式测试⼯具
Firefox 浏览器内置了⾃定义设计视图的功能，可以通过Firefox->Web 开发者->⾃定义设计视图（或者摁下Shift + Ctrl + m）。相⽐⽹络⼯具，运⾏更加流畅，⽆需联⽹。
媒体查询常⽤样式表：
<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>
Web app 开发的最佳实践与中⽂总结
来⾃的⼀些移动端经验总结⼲货
本资料很多引⽤了指尖上的js系列
基础知识
meta标签
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⾥多个属性的设置⼀定要⽤分号+空格来隔开，如果不规范将不会起作⽤。
注意根据提供的资料补充，content 使⽤分号作为分隔，在⽼的浏览器是⽀持的，但不是规范写法。
规范的写法应该是使⽤逗号分隔，参考和
其中：
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 系列⽂章)
更详细的 viewport 相关的知识也可以参考
移动开发事件
⼿势事件
touchstart //当⼿指接触屏幕时触发
touchmove //当已经接触屏幕的⼿指开始移动后触发
touchend //当⼿指离开屏幕时触发
touchcancel
触摸事件
gesturestart //当两个⼿指接触屏幕时触发
gesturechange //当两个⼿指接触屏幕后开始移动时触发
gestureend
屏幕旋转事件
onorientationchange
检测触摸屏幕的⼿指何时改变⽅向
orientationchange
touch事件⽀持的相关属性
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() {
ientation) {
  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();
});
双⼿指滑动事件：
// 双⼿指滑动事件
addEventListener('load',  function(){ usewheel = twoFingerScroll;},
false              // 兼容各浏览器，表⽰在冒泡阶段调⽤事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120;              //对 delta 值进⾏判断(⽐如正负) ，⽽后执⾏相应操作
return true;
};
JS 单击延迟
click 事件因为要等待单击确认，会有 300ms 的延迟，体验并不是很好。
开发者⼤多数会使⽤封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。WebKit CSS:
，全⾯、⽅便查询，下⾯为常⽤属性。
①“盒模型”的具体描述性质的包围盒块内容，包括边界，填充等等。
-webkit-border-bottom-left-radius: radius;
-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius;      //容器圆⾓
-webkit-box-sizing: sizing_model; 边框常量值：border-box/content-box
-webkit-box-shadow: hoff voff blur color; //容器阴影（参数分别为：⽔平X ⽅向偏移量；垂直Y ⽅向偏移量；⾼斯模糊半径值；阴影颜⾊值）
-webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button;  //内置的CSS 表现，暂时只⽀持push-button
②“视觉格式化模型”描述性质，确定了位置和⼤⼩的块元素。
direction: rtl
unicode-bidi: bidi-override; 常量：bidi-override/embed/normal
③“视觉效果”描述属性，调整的视觉效果块内容，包括溢出⾏为，调整⾏为，能见度，动画，变换，和过渡。
clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量：auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量：visible(默认值)/hidden
-webkit-box-reflect: right 1px; 镜向反转
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;  //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量：fixed/scroll
-webkit-perspective: value; 常量：none(默认)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 与3D)
④“⽣成的内容，⾃动编号，并列出”描述属性，允许您更改内容的⼀个组成部分，创建⾃动编号的章节和标题，和操纵的风格清单的内容。content: “Item” counter(section) ” “;
This resets the counter.
First section
>two section
three section
html animation属性counter-increment: section 1;
counter-reset: section;
⑤“分页媒体”描述性能与外观的属性，控制印刷版本的⽹页，如分页符的⾏为。
page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid
⑥“颜⾊和背景”描述属性控制背景下的块级元素和颜⾊的⽂本内容的组成部分。
-webkit-background-clip: content; 常量：border/content/padding/text
-webkit-background-origin: padding; 常量：border/content/padding/text
-webkit-background-size: 55px; 常量：length/length_x/length_y
⑦ “字型”的具体描述性质的⽂字字体的选择范围内的⼀个因素。报告还描述属性⽤于下载字体定义。
unicode-range: U+00-FF, U+980-9FF;
⑧“⽂本”描述属性的特定⽂字样式，间距和⾃动滚屏。
text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量：break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量：direction(⽅向) increment(迭代次数) repetition(重复) style(样式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(⽆穷次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量：circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量：normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量： normal/space
-webkit-rtl-ordering: logical; 常量：visual/logical
-webkit-user-drag: element; 常量：element/auto/none
-webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量：text/auto/none
⑨“表格”描述的布局和设计性能表的具体内容。
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量：always/auto/avoid/left/right
-webkit-column-break-before: right; 常量：always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量：avoid/auto
-webkit-column-count: 3; //分栏
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid
⑩“⽤户界⾯”描述属性，涉及到⽤户界⾯元素在浏览器中，如滚动⽂字区，滚动条，等等。报告还描述属性，范围以外的⽹页内容，如光标的标注样式和显⽰当您按住触摸触摸⽬标，如在iPhone上的链接。
-webkit-box-align: baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch
-webkit-box-direction: normal；常量：normal/reverse
-webkit-box-flex: flex_valuet
-webkit-box-flex-group: group_number
-webkit-box-lines: multiple; 常量：multiple/single
-webkit-box-ordinal-group: group_number
-webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; 常量：center/end/justify/start
动画过渡这是 Webkit 中最具创新⼒的特性：使⽤过渡函数定义动画。
-webkit-animation: title infinite ease-in-out 3s;
animation 有这⼏个属性：
-webkit-animation-name： //属性名，就是我们定义的keyframes
-
webkit-animation-duration：3s //持续时间
-webkit-animation-timing-function： //过渡类型：ease/ linear(线性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
-webkit-animation-delay：10ms //动画延迟(默认0)
-webkit-animation-iteration-count： //循环次数(默认1)，infinite 为⽆限
-webkit-animation-direction： //动画⽅式：normal(默认正向播放)； alternate(交替⽅向，第偶数次正向播放，第奇数次反向播放)
这些同样是可以简写的。但真正让我觉的很爽的是keyframes，它能定义⼀个动画的转变过程供调⽤，过程为0%到100%或from(0%)到to(100%)。简单点说，只要你有想法，你想让元素在这个过程中以什么样的⽅式改变都是很简单的。
-webkit-transform: 类型（缩放scale/旋转rotate/倾斜skew/位移translate）
scale(num,num) 放⼤倍率。scaleX 和 scaleY(3)，可以简写为：scale(* , *)
rotate(*deg) 转动⾓度。rotateX 和 rotateY，可以简写为：rotate(* , *)
Skew(*deg) 倾斜⾓度。skewX 和skewY，可简写为：skew(* , *)
translate(*,*) 坐标移动。translateX 和translateY，可简写为：translate(* , *)。
页⾯描述
<link rel="apple-touch-icon-precomposed" href="/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/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的最上⾯的时间、信号栏是⿊⾊的，当然也可以设置其它参数，详细参数说明请参照：
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
常见的 iPhone 和 Android 屏幕参数。
设备分辨率设备像素⽐率
Android LDPI 320×240 0.75
Iphone 3 & Android MDPI 320×480 1
Android HDPI 480×800 1.5
Iphone 4 960×640 2.0
iPhone 4的⼀个 CSS 像素实际上表现为⼀块 2×2 的像素。所以图⽚像是被放⼤2倍⼀样，模糊不清晰。
解决办法：
1、页⾯引⽤
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />
2、CSS⽂件⾥
#header {
background:url(mdpi/bg.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/
*CSS for high-density screens*/
#header {
background:url(hdpi/bg.png);
}
}
移动 Web 开发经验技巧
点击与click事件
对于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需要滚动的都可以⽣效了。
锁定 viewport
ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动⽤户界⾯（弹出键盘除外）。
利⽤ Media Query监听
Media Query 相信⼤部分⼈已经使⽤过了。其实 JavaScript可以配合 Media Query这么⽤：
var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
function handleOrientationChange(mql) {
if (mql.matches) {
alert('The device is currently in portrait orientation ')
} else {
alert('The device is currently in landscape orientation')
}}
借助了 Media Query 接⼝做的事件监听，所以很强⼤！
也可以通过获取 CSS 值来使⽤ Media Query 判断设备情况，详情请看：。
rem最佳实践
rem是⾮常好⽤的⼀个属性，可以根据html来设定基准值，⽽且兼容性也很不错。不过有的时候还是需要对⼀些莫名其妙的浏览器优雅降级。以下是两个实践
1. 这有个demo，发现chrome当font-size⼩于12时，rem会按照12来计算。因此设置基准值要考虑这⼀点
2. 可以⽤以下的代码⽚段保证在低端浏览器下也不会出问题
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px / h1 { font-size: 24px; font-size: 2.4rem; } / =24px */
被点击元素的外观变化，可以使⽤样式来设定：
-
webkit-tap-highlight-color: 颜⾊
检测判断 iPhone/iPod
开发特定设备的移动⽹站，⾸先要做的就是设备侦测了。下⾯是使⽤Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  if (kie.indexOf("iphone_redirect=false") == -1) {
    window.location = "m.example";
  }
}
虽然Javascript是可以在⽔果设备上运⾏的，但是⽤户还是可以禁⽤。它也会造成客户端刷新和额外的数据传输，所以下⾯是服务器端侦测和转向：
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPo
d')) {
  header('Location: yoursite/iphone');
  exit();
}
阻⽌旋转屏幕时⾃动调整字体⼤⼩
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
模拟:hover伪类
因为iPhone并没有⿏标指针，所以没有hover事件。那么CSS :hover伪类就没⽤了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似onMouseOut。所以我们可以⽤它来模拟hover。使⽤Javascript：
var myLinks = ElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
  myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
  myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}
然后⽤CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }
这样设计⼀个链接，感觉可以更像按钮。并且，这个模拟可以⽤在任何元素上。
Flexbox 布局
居中问题
居中是移动端跟pc端共同的噩梦。这⾥有两种兼容性⽐较好的新⽅案。
table布局法
.box{ text-align:center; display:table-cell; vertical-align:middle; }
⽼版本flex布局法
.box{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }
以上两种其实分别是retchat跟ionic的布局基⽯。
移动端实现标题⽂字截断
处理 Retina 双倍屏幕
input类型为date情况下不⽀持placeholder（来⾃于江⽔）
这其实是浏览器⾃⼰的处理。因为浏览器会针对此类型 input 增加 datepicker 模块。
对 input type date 使⽤ placeholder 的⽬的是为了让⽤户更准确的输⼊⽇期格式，iOS 上会有 datepicker 不会显⽰ placeholder ⽂字，但是为了统⼀表单外观，往往需要显⽰。Android 部分机型没有 datepicker 也不会显⽰ placeholder ⽂字。
桌⾯端（Mac）
Safari 不⽀持 datepicker，placeholder 正常显⽰。
Firefox 不⽀持 datepicker，placeholder 正常显⽰。
Chrome ⽀持 datepicker，显⽰年、⽉、⽇格式，忽略 placeholder。
移动端
iPhone5 iOS7 有 datepicker 功能，但是不显⽰ placeholder。
Andorid 4.0.4 ⽆ datepicker 功能，不显⽰ placeholder
解决⽅法：
<input placeholder="Date" class="textbox-n" type="text" onfocus="(pe='date')"  id="date">
因为text是⽀持placeholder的。因此当⽤户focus的时候⾃动把type类型改变为date，这样既有placeholder也有datepicker了
判断照⽚的横竖排列
有这样⼀种需求，需要判断⽤户照⽚是横着拍出来的还是竖着拍出来的，这⾥需要使⽤照⽚得exif信息：
$("input").change(function() {
var file = this.files[0];
fr  = new FileReader;
var exif = adFromBinaryFile(new sult));
alert(exif.Orientation);
};
});
Android上当viewport的width⼤于device-width时出现⽂字⽆故折⾏的解决办法
⽩屏解决与优化⽅案
当前很多⽆线页⾯都使⽤前端模板进⾏数据渲染，那么在糟糕的⽹速情况下，⼀进去页⾯，看到的不是⽩屏就是 loading，这成为⽩屏问题。
此问题发⽣的原因基本可以归结为⽹速跟静态资源
1、css⽂件加载需要⼀些时间，在加载的过程中页⾯是空⽩的。解决：可以考虑将css代码前置和内联。
2、⾸屏⽆实际的数据内容，等待异步加载数据再渲染页⾯导致⽩屏。解决：在⾸屏直接同步渲染html，后续的滚屏等再采⽤异步请求数据和渲染html。
3、⾸屏内联js的执⾏会阻塞页⾯的渲染。解决：尽量不在⾸屏html代码中放置内联脚本。（来⾃翔歌）
解决⽅案
根本原因是客户端渲染的⽆⼒，因此最简单的⽅法是在服务器端，使⽤模板引擎渲染所有页⾯。同时
1减少⽂件加载体积，如html压缩，js压缩 2加快js执⾏速度⽐如常见的⽆限滚动的页⾯，可以使⽤js先渲染⼀个屏幕范围内的东西 3提供⼀些友好的交互，⽐如提供⼀些假的滚动条 4使⽤本地存储处理静态⽂件。
如何实现打开已安装的app，若未安装则引导⽤户安装?
goToNative:function(){
if(!body) {
setTimeout(function(){
doc.body.appendChild(iframe);
}, 0);
} else {
body.appendChild(iframe);
}
setTimeout(function() {
veChild(iframe);
gotoDownload(startTime);//去下载，下载链接⼀般是itunes app store或者apk⽂件链接
/**
* 测试时间设置⼩于800ms时，在android下的UC浏览器会打开native app时并下载apk，
* 测试android+UC下打开native的时间最好⼤于800ms;
*/
}, 800);
}
window.location = 'intent://' + schemeUrl + '#Intent;scheme=' + scheme + ';package=' + self.package + ';end';
active的兼容(来⾃薛端阳)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。