web app 开发

浏览数：13 / 时间：2015年06月11日

去除手机浏览器标签默认高亮边框

-webkit-tap-highlight-color 属性

属性描述：这个属性可以指设置透明度。如果未设置透明度，iOS上的Safari会给予颜色一个默认的透明度。把透明度设为0，则会禁用此属性。如果你把透明度设为1，元素将会不可见。只用于iOS(iPhone和iPad)，是点击反馈时的区域背景，或者是点击时的高亮背景颜色。

但是我使用后发现安卓手机也是支持该属性的，下面是我写的样式

a,button,input{
-webkit-tap-highlight-color:rgba(255,0,0,0);
-webkit-tap-highlight-color: transparent; /* Android */
}

//强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
//iphone设备中的safari私有meta标签，允许全屏模式浏览；
<meta content="yes" name="apple-mobile-web-app-capable" />
//iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
//告诉设备忽略将页面中的数字识别为电话号码；
<meta content="telephone=no" name="format-detection" />

*关闭识别后添加链接

关闭识别后添加链接

代码如下	复制代码
<a href="tel:12345654321">打电话给我</a> <a href="sms:12345654321">发短信</a> <span onclick="location.href=‘tel:122‘"></span>

*使用HTML5标签

使用html5标签增强语义，提升体验

*放弃float属性

遇到内容排列排列显示的布局放弃float，使用display、webkit-box自适应布局

*利用CSS3边框背景属性

代码如下	复制代码
使用-webkit-border-image代替复杂的（圆角+内发光+高光）

*块级化a标签

将每条数据都放在一个a标签中提升用户体验，尽可能的保证用户的可点击区域较大。

*去除Android邮箱地址的识别

代码如下	复制代码
<meta content="email=no" name="format-detection" />

*去除iOS和Android中的输入URL的控件条

代码如下	复制代码
setTimeout(scrollTo,0,0,0) 需要放在window.onload里，当前文档的内容高度必须是高于窗口的高度。

*用户旋转设备

禁止开发者阻止浏览器的orientationchange事件

*用户是通过主屏启动你的webapp

IOS 从主屏启动时navigator.standalone为true,从站点为false
Android 无

*关闭iOS中键盘自动大写

代码如下	复制代码
autocapitalize="off"

*iOS中如何彻底禁止用户在新窗口打开页面

代码如下	复制代码
IOS -webkit-touch-callout:none;

Android 无效。

*iOS中禁止用户保存图片/复制图片

代码如下	复制代码
-webkit-touch-callout:none

*iOS中如何禁止用户选中文字

代码如下	复制代码
-webkit-user-select:none

*iOS中如何获取滚动条的值

代码如下	复制代码
window.scrollY和window.scrollX

*解决盒子边框溢出

宽度100%时边框溢出，-webkit-box-sizing:border-box;

*Android 2.0以下圆角问题

必须加-webkit-

*android页面自适应

代码如下

复制代码

*如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

*样式设置

代码如下

复制代码

*事件

代码如下

复制代码

/ 手势事件
touchstart            //当手指接触屏幕时触发
touchmove           //当已经接触屏幕的手指开始移动后触发
touchend             //当手指离开屏幕时触发
touchcancel

// 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend

// 屏幕旋转事件
onorientationchange

// 检测触摸屏幕的手指何时改变方向
orientationchange www.111cn.net

// 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
window.orientation //0 肖像模式，-90 左旋，90 右旋，180 风景模式

*自动大写与自动修正