首页 > 代码库 > web app 开发
web app 开发
去除手机浏览器标签默认高亮边框
-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,且不允许用户点击屏幕放大浏览; |
*关闭识别后添加链接
关闭识别后添加链接
代码如下 | 复制代码 |
<a href="http://www.mamicode.com/tel:12345654321">打电话给我</a> <a href="http://www.mamicode.com/sms:12345654321">发短信</a> <span onclick="location.href=http://www.mamicode.com/‘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页面自适应
代码如下 | 复制代码 |
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> *如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 <meta name="format-detection" content="telphone=no" /> |
*样式设置
代码如下 | 复制代码 |
<link rel=”apple-touch-startup-image” href=http://www.mamicode.com/”startup.png” /> // 设置开始页面图片 |
*事件
代码如下 | 复制代码 |
/ 手势事件 // 触摸事件 // 屏幕旋转事件 // 检测触摸屏幕的手指何时改变方向 // touch事件支持的相关属性 //屏幕旋转事件:onorientationchange |
*自动大写与自动修正
代码如下 | 复制代码 |
<input type="text" autocapitalize="off" autocorrect="off" /> |
*阻止旋转屏幕时自动调整字体大小
代码如下 | 复制代码 |
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} |
*缩小图片
代码如下 | 复制代码 |
@media screen and (max-device-width: 480px){ |
web app 开发