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="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页面自适应
代码如下 | 复制代码 |
<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=”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 开发的更多相关文章
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
- App.js – 用于移动 Web App 开发的 JS 界面库
App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...
- 微信公众平台开发:Web App开发入门
WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...
- web app 开发必不可少的滑动插件 Flipsnap
flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android, ...
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- Native App开发 与Web App开发(原生与web开发优缺点)
Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...
- 前端读者 | Web App开发入门
本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...
- WEB APP 开发标签
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它 ...
- 手机web app开发笔记
各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...
随机推荐
- The Ninth Hunan Collegiate Programming Contest (2013) Problem I
Problem I Interesting Calculator There is an interesting calculator. It has 3 rows of button. Row 1: ...
- Creating Icon Overlay Handlers / 创建图标标记 Handlers (翻译自MSDN) / VC++, Windows, DLL, ATL, COM
创建图标标记 Handlers Creating Icon Overlay Handlers 图标标记是放在代表着某个 Shell 对象的图标之左下角的小图像.它们通常被加在一个对象的图标的身上来提供 ...
- 数据结构(一)之HelloWord
最近由于学习上面的需要,要重新的看看数据结构方面的知识!当然,我觉得数据结构也非常的重要,下面是我的学习的一点小小的记录,以备日后的查看! 我的环境: 1:操作系统:windows7 2:编码环境:M ...
- Unable to load type System.Data.Entity.DynamicProxiesXXXXXrequired for deserialization.
Memcache实例的Get方法时抛出了异常“Unable to load type System.Data.Entity.DynamicProxies.AdInfoItems_19CD09C8E46 ...
- python列表的常用操作方法
主要介绍了Python中列表(List)的详解操作方法,包含创建.访问.更新.删除.其它操作等,需要的朋友可以参考下. 1.创建列表.只要把逗号分隔的不同的数据项使用方括号括起来即可 List = [ ...
- Windows API学习---线程与内核对象的同步
前言 若干种内核对象,包括进程,线程和作业.可以将所有这些内核对象用于同步目的.对于线程同步来说,这些内核对象中的每种对象都可以说是处于已通知或未通知的状态之中.这种状态的切换是由Microsoft为 ...
- c++ builder ListView实现可编辑任意列(转)
// --------------------------------------------------------------------------- // Form的构造函数中填充StrinG ...
- 安装node_modules文件遇到的问题:更改代理
npm 1080 1081
- Heavily reliance on forensic tools is risky
We could take advantage of forensic tools to examine and analyze the evidence, but heavily reliance ...
- 1.4Linux内核版本号的定义规则
Linux内核版本号的组成: (1)主版本号: (2)次版本号: (3)修订版本号: (4)微调版本号: (5)为特定的Linux系统特别调校的描述: 例子:2.6.29.7-flykernel-12 ...