认识达内从这里开始

烟台达内小编给大家分享一些web app的开发技巧：

meta 标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> :强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览，让 app 更贴近原生应用

<meta content="yes" name="apple-mobile-web-app-capable" />：

iphone设备中的safari私有meta标签，表示：允许全屏模式浏览

<meta content="black" name="apple-mobile-web-app-status-bar-style" />：iphone的私有meta标签，它指定的iphone中safari顶端的状态条的样式，默认值为 default(白色)，可以定为 black(黑色)和 black-translucent(灰色半透明)

<meta content="telephone=no" name="format-detection" />：忽略将页面中的数字识别为电话号码

HTML5新标签的使用

我们在开发web app 的时候，尽可能的使用html5新的标签，如：定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等，即让我们的页面结构化。

在开发webApp的时候，我们通常就是需要开发单页应用，即整个系统都使用一个页面装载，也可能是按模块分为独立页面装载。在开发单页应用时第一个要处理的问题就是页面结构化，由于多个功能集中在一个页面呈现，就必然需要考虑如何实现多个视图布局、如何实现视图之间动画切换等问题。使用新的html5标签让页面结构化，可以极大提升咱们的开发效率

这篇文章为我们详细的解释了，页面结构化的使用：#/2013/09/移动Web单页应用开发实践——页面结构化/

布局

不使用 float 布局，尽可能使用 弹性(flexbox)布局 或 响应式布局。

在使用百分比布局的时候，我们常常碰到溢出的问题，如当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100%，那么请使用：

-webkit-box-sizing:border-box

动画

使用 CSS3 做动画效果，且尽可能的让做动画的元素脱离文档流

关于 transition 的闪屏，请加上如下样式：

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

触摸事件

移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。在移动浏览器中对触摸事件的响应顺序应当是：

ontouchstart -> ontouchmove -> ontouchend -> onclick

建议大家在开发web app的时候，使用 zepto.js 中的 touch 模块

块级化 a 标签，并模拟 hover伪类

因为没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。如何模拟hover事件呢?

禁止用户选中文字

-webkit-user-select:none

更多资讯扫请描下方二维码！