技术控

    今日:80| 主题:49270
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 移动端HTML5页面开发备忘录

[复制链接]

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

移动端HTML5页面开发备忘录-1 (Android,telephone,搜索引擎,default,content)
把平时开发工作中遇到的一些问题写下来,权当备忘录。
  有关Meta

  基本Meta

         [code]







[/code]       搜索引擎Meta

         [code]


[/code]       页面缓存设置Meta

         [code]



[/code]       常见问题

  移动端字体设置

         [code]/*中英字体名对照表
宋体      SimSun
黑体      SimHei
微信雅黑   Microsoft Yahei
微软正黑体 Microsoft JhengHei
新宋体    NSimSun
新细明体  MingLiU
细明体    MingLiU
标楷体    DFKai-SB
仿宋     FangSong
楷体     KaiTi
仿宋_GB2312  FangSong_GB2312
楷体_GB2312  KaiTi_GB2312  
说明:中文字体多数使用宋雅黑,英文用Helvetica
*/
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
[/code]       打电话发短信写邮件

         [code]// 打电话
打电话给:010-88888

//  发短信
发短信给: 88888

// 写邮件
//注:在添加这些功能时,第一个功能以"?"开头,后面的以"&"开头
//1.普通邮件
快来点我啊,给你发种子。
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
快来点我啊,给你发种子。
//3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)
快来点我啊,给你发种子。
//4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址
快来点我啊,给你发种子。
//5.包含主题,用?subject=
快来点我啊,给你发种子。
//6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行
快来点我啊,给你发种子。
//7.内容包含链接,含http(s)://等的文本自动转化为链接
快来点我啊,给你发种子。
//8.内容包含图片(PC不支持)
">快来点我啊,给你发种子。
//9.完整示例
">快来点我啊,给你发种子。
[/code]       touch事件

   事件响应顺序: ontouchstart > ontouchmove > ontouchend > onclick
  
       
  • touchstart ——当手指触碰屏幕时候发生   
  • touchmove ——当手指在屏幕上滑动时连续触发。   
  • 通常在滑屏页面,会调用 event 的 preventDefault() 可以阻止默认情况的发生:阻止页面滚动   
  • touchend ——当手指离开屏幕时触发   
  • touchcancel ——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面 alert() ,此时会触发该事件,这个事件比较少用。  
  TouchEvent说明:
  
       
  • touches:屏幕上所有手指的信息   
  • targetTouches:手指在目标区域的手指信息   
  • changedTouches:最近一次触发该事件的手指信息   
  • touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,用于计算手指信息  
  参数信息(changedTouches[0])
  
       
  • clientX、clientY在显示区的坐标   
  • target:当前元素  
  科普:移动端click事件200-300ms的延时响应

  以下是历史原因:
  2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。
  双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
   原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接 ,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。
  造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
  解决方案:
  
       
  • fastclick   
  • zepto的 touch模块  
  点击元素产生背景或边框问题

         [code]a,button,input,textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
}   
/*也可以...,简单粗暴*/
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
[/code]       字体单位font-size选择px还是rem

         [code] /*如需适配多种移动设备,建议使用rem。以下为参考值:*/
html { font-size: 62.5%; }   /*10÷16 = 62.5%*/
/*设置12px字体。
注:在rem前要加上对应的px值,解决不支持rem的浏览器的兼容问题,做到优雅降级*/
body { font-size:12px; font-size:1.2rem; }
[/code]       其它一些实用CSS技巧

         [code]/*禁止长按链接与图片弹出菜单*/
a,img { -webkit-touch-callout: none }   
/*禁止ios和android用户选中文字*/
html,body {-webkit-user-select:none; user-select: none; }
/*改变输入框placeholder的颜色值*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

/*android上去掉语音输入按钮*/
input::-webkit-input-speech-button {display: none}
[/code]       禁用input在ios下,输入英文首字母的默认大写

         [code]
[/code]       屏幕旋转的事件和样式

  JS处理:
         [code]function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //横屏下需要执行代码
    }else{
        //竖屏下需要执行代码
    }
}

orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)
[/code]       CSS处理:
         [code]


0[/code]       播放视频不全屏

         [code]


1[/code]       消除transition闪屏

         [code]


2[/code]
友荐云推荐




上一篇:Common React Native App Layouts: Calendar Page
下一篇:infinite scrolling grid in angular 2
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

南白 发表于 6 天前
楼下的,觉得比特币咋样啊?
回复 支持 反对

使用道具 举报

搜狗站长网f 发表于 5 天前
在街上看美女,高一点就是欣赏;低一点就是流氓。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表