这就是说我们今天连续来分享一下运动端的web开发技术吧。那么我们今天蝉联来分享一下动端的web开发技巧吧。

昨天的《移动 Web
开发技术》的当即篇稿子,大家反响不错,因为这些题材在大家便写移动端的页面时经常遇上的。所以十分稿子要极品实用的,那么我们今天持续来分享一下平移端的web开发技术吧,希望对大家有助。

昨天的《移动 Web
开发技术》的当即篇稿子,大家反响不错,因为这些题材在豪门便写移动端的页面时经常遇上的。所以颇稿子要极品实用的,那么我们今天蝉联来分享一下挪端的web开发技术吧,希望对大家有所助。

PS:不要吃有些伙伴第一软写移动端像下就号一脸的蒙逼哈哈… …

PS:不要让多少伙伴第一赖写移动端像下就号一面子的蒙逼哈哈… …

图片 1

图片 2

第一、启用 WebApp 全屏模式(IOS)

当网站上加至主屏幕后再点击进行启动时,可藏地址栏(从浏览器跳转或输入链接进入并从未是作用)

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!--more-->

首先、启用 WebApp 全屏模式(IOS)

当网站上加至主屏幕后再点击进行启动时,可藏地址栏(从浏览器跳转或输入链接进入并没有此功效)

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!--more-->

 

 

第二、加至主屏后底APP图标**

指定web app添加到主屏后底图标路径,有一定量栽小微不同的章程:

<!– 规划原图 –>

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">

<!– 添加高光效果 –>

<link href="short_cut_114x114.png" rel="apple-touch-icon">

*
apple-touch-icon:在IOS6和以下的版本会自动吗图标添加同层高光效果(IOS7从头都采取扁平化的宏图风格)
* apple-touch-icon-precomposed:使用“设计原图图标”

第二、加以到主屏后底APP图标**

点名web app添加到主屏后的图标路径,有有限种微微不同的法:

<!– 统筹原图 –>

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">

<!– 添加高光效果 –>

<link href="short_cut_114x114.png" rel="apple-touch-icon">

*
apple-touch-icon:在IOS6与以下的版本会自动为图标添加相同层高光效果(IOS7方始就运用扁平化的宏图风格)
* apple-touch-icon-precomposed:使用“设计原图图标”

 

 

老三、优先利用时版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

其三、优先使用新型版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

 

 

第四、移动端touch事件(区分webkit 和 winphone)

当用户手指在移动装备以屏幕及滑动会触发的touch事件

以下支持webkit

  • touchstart——当手指触碰屏幕时发出。不管当前有多少才手指
  • touchmove——当手指于屏幕上滑动时老是触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻挡默认情况的出:阻止页面滚动
  • touchend——当手指离开屏幕时点
  • touchcancel——系统已跟踪触摸时候会触发。例如当触摸过程被突然页面alert()一个唤起框,此时见面硌发拖欠事件,这个事件比少用

以下支持winphone 8

  • MSPointerDown——当手指触碰屏幕上有。不管当前来些许才手指
  • MSPointerMove——当手指在屏幕及滑时连触发。通常我们重滑屏页面,会调用css的html{-ms-touch-action:
    none;}可以阻止默认情况的出:阻止页面滚动
  • MSPointerUp——当手指离开屏幕时点

第四、移动端touch事件(区分webkit 和 winphone)

当用户手指在移动设备在屏幕及滑动会触发的touch事件

以下支持webkit

  • touchstart——当手指触碰屏幕上发。不管当前发生些许只手指
  • touchmove——当手指当屏幕及滑时连连触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻挡默认情况的生:阻止页面滚动
  • touchend——当手指离开屏幕时点
  • touchcancel——系统已跟踪触摸时候会触发。例如在动过程被陡然页面alert()一个提醒框,此时会晤接触发该事件,这个波于少用

以下支持winphone 8

  • MSPointerDown——当手指触碰屏幕上发生。不管当前发小才手指
  • MSPointerMove——当手指于屏幕及滑时总是触发。通常我们重滑屏页面,会调用css的html{-ms-touch-action:
    none;}可以阻挡默认情况的生:阻止页面滚动
  • MSPointerUp——当手指离开屏幕时点

 

 

第五、移动端click屏幕产生200-300 ms的推响应

移动设备上的web网页是产生300ms延迟的,玩玩会招按钮点击延迟还是点击失效。

以下是历史原因:

2007年苹果发布首款iphone上IOS系统搭载的safari为了以适用于PC端上异常屏幕的网页会比好的显示在大哥大端上,使用了双双击缩放
(double tap to
zoom)的方案,比如你于大哥大及用浏览器打开一个PC上的网页,你或许以看到页面内容则足支撑满所有屏幕,但是字体、图片都颇轻不到头,此时得很快
双击屏幕上的某某平组成部分,你就可知看清拖欠部分放大后的情节,再次双击后会返回原来状态。

双击缩放是指用手指在屏幕上高速点击两差,iOS 自带的 Safari
浏览器会将网页缩放至老比例。

案由就是发生当浏览器需要什么判定快速点击上,当用户在屏幕及单击某一个素时候,例如超转链接<a
href=”#”></a>,
此处浏览器会优先捕获该次单击,但浏览器不克操纵用户是只有而点击链接或者要双击该部分区域进行缩放操作,所以,捕获第一次于单击后,浏览器会先Hold一段子
时间t,如果在t时间区间里用户不进行下一致次点击,则浏览器会开单击跳反链接的处理,如果t时间里用户进行了亚破单击操作,则浏览器会禁止跳转,转而进
行对该有区域页面的缩放操作。

这就是说这个日子区间t有微啊?在IOS
safari下,大概为300毫秒。这虽是缓的由来。造成的结果用户纯粹单击页面,页面需要了一段时间才应,给用户慢体验感觉,对于web开发者来说
是,页面js捕获click事件之回调函数处理,需要300ms后才生效,也便间接导致影响其他工作逻辑的拍卖。

釜底抽薪方案:

  • fastclick可缓解在手机及点击事件之300ms延迟
  • zepto的touch模块,tap事件吧是以缓解在click的推移问题

触摸事件的应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解决300ms延迟的问题,也得通过绑定ontouchstart事件,加快针对事件的响应

第五、移动端click屏幕产生200-300 ms的推移响应

移动装备及之web网页是发生300ms延迟的,玩玩会招按钮点击延迟还是点击失效。

以下是历史原因:

2007年苹果发布首款iphone上IOS系统搭载的safari为了用适用于PC端上生屏幕的网页会于好之展示在大哥大端上,使用了双击缩放
(double tap to
zoom)的方案,比如您于大哥大上用浏览器打开一个PC上之网页,你或以盼页面内容虽然可以支撑满整个屏幕,但是字体、图片都挺薄不清,此时足快捷
双击屏幕及之某个同部分,你就是能够看清拖欠有的放大后的情,再次双击后能够返原来状态。

双击缩放是指用手指在屏幕上快点击两糟,iOS 自带的 Safari
浏览器会将网页缩放至老比例。

缘由纵然发当浏览器需要哪些判断快速点击上,当用户以屏幕上单击某一个因素时候,例如超转链接<a
href=”#”></a>,
此处浏览器会预先捕获该次单击,但浏览器不克说了算用户是仅仅而点击链接或者如双击该有的区域开展缩放操作,所以,捕获第一软单击后,浏览器会先Hold一段子
时间t,如果以t时间区间里用户不进行下同样破点击,则浏览器会召开单击跳反链接的拍卖,如果t时间里用户展开了第二潮单击操作,则浏览器会禁止跳转,转而进
行对拖欠有的区域页面的缩放操作。

那么这时刻区间t有稍许为?在IOS
safari下,大概也300毫秒。这虽是推的由于来。造成的后果用户纯粹单击页面,页面需要过一段时间才应,给用户慢体验感觉,对于web开发者来说
是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就是间接导致影响其它事情逻辑的处理。

解决方案:

  • fastclick好解决在大哥大及点击事件的300ms延迟
  • zepto的touch模块,tap事件呢是为解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

缓解300ms延迟的题材,也堪由此绑定ontouchstart事件,加快针对事件之应

 

 

第六、ios系统中元素被捅时起的半透明灰色遮罩怎么去丢

ios用户点击一个链接,会冒出一个半晶莹剔透灰色遮罩,
如果想只要经受用,可安装-webkit-tap-highlight-color的alpha值为0,也便是属于性值的结尾一号设置也0纵可去半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

第六、ios系统中元素被触动时产生的半透明灰色遮罩怎么去丢

ios用户点击一个链接,会冒出一个半透明灰色遮罩,
如果想只要受用,可设置-webkit-tap-highlight-color的alpha值为0,也就是是属性值的最终一员设置为0不怕足以去半晶莹剔透灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

 

 

第七、部分android系统中元素被点击时生的边框怎么去丢

android用户点击一个链接,会产出一个边框要半透明灰色遮罩,
不同生产商定义出来额效果不均等,可设置-webkit-tap-highlight-color的alpha值为0失去除一些机器自带的效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
}

-webkit-user-modify有只副作用,就是输入法不再能输入多单字符

除此以外,有些机型去除不了,如小米2

于以钮类还出个措施,不使用a或者input标签,直接用div标签

第七、部分android系统中元素被点击时生的边框怎么去丢

android用户点击一个链接,会面世一个边框要半晶莹剔透灰色遮罩,
不同生产商定义出来额效果不相同,可安装-webkit-tap-highlight-color的alpha值为0夺除有机器自带的效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
}

-webkit-user-modify有只副作用,就是输入法不再能够输入多只字符

除此以外,有些机型去除不了,如小米2

对于本钮类还起个章程,不使用a或者input标签,直接用div标签

 

 

第八、手机拍摄及上传图片**

  • <input type=”file”>的accept 属性
  • <!– 选择像 –>
  • <input type=file accept=”image/*”>
  • <!– 选择观看频 –>
  • <input type=file accept=”video/*”>

使用总结:

  • ios 有录像、录像、选取本地图片功能
  • 一对android只有选择本地图片功能
  • winphone不支持
  • input控件默认外观丑陋

第八、手机照及上传图片**

  • <input type=”file”>的accept 属性
  • <!– 选择像 –>
  • <input type=file accept=”image/*”>
  • <!– 选择观看频 –>
  • <input type=file accept=”video/*”>

用总结:

  • ios 有拍照、录像、选取本地图片功能
  • 片android只有选择本地图片功能
  • winphone不支持
  • input控件默认外观丑陋

第九、消除transition闪屏

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

开启硬件加速

  • 缓解页面闪白
  • 担保动画流畅

.css {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

计划大性能CSS3动画的几乎独元素

  • 尽量地动合成属性transform和opacity来计划CSS3动画,
  • 不使用position的left和top来定位

利用translate3D开启GPU加速

第九、消除transition闪屏

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

敞开硬件加速

  • 化解页面闪白
  • 保证动画流畅

.css {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

规划大性能CSS3动画的几乎单元素

  • 尽量地行使合成属性transform和opacity来统筹CSS3动画,
  • 不使用position的left和top来定位

利用translate3D开启GPU加速

第十、audio元素和video元素在ios和andriod中无法自动播放

许本着方案:触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

今日咱们尽管享受这十单,大家产生需要的友善藏起来哦!

========================================================

小月博客

http://www.aliyue.net

WEB

========================================================

第十、audio元素和video元素在ios和andriod中无法自动播放

承诺针对方案:触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

今日咱们就是享受这十独,大家有亟待之团结藏起来哦!

========================================================

小月博客

http://www.aliyue.net

WEB

========================================================

相关文章