请选择 进入手机版 | 继续访问电脑版

技术控

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

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

[复制链接]
頭痛~出賣了我 发表于 2016-11-30 19:43:48
189 4

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

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

x

移动端HTML5页面开发备忘录

移动端HTML5页面开发备忘录
把平时开发工作中遇到的一些问题写下来,权当备忘录。
  有关Meta

  基本Meta

        
  1. <!-- 设置缩放 -->
  2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
  3. <!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->
  4. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. <!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->
  6. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  7. <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
  8. <meta name="format-detection" content="telephone=no, email=no" />
复制代码
      搜索引擎Meta

        
  1. <!-- 搜索引擎索引方式:通常有如下几种取值:none,noindex,nofollow,all,index和follow。-->
  2. <meta name="robots" content="index,follow" />
  3. <!--
  4.     all:文件将被检索,且页面上的链接可以被查询;
  5.     none:文件将不被检索,且页面上的链接不可以被查询;
  6.     index:文件将被检索;
  7.     follow:页面上的链接可以被查询;
  8.     noindex:文件将不被检索;
  9.     nofollow:页面上的链接不可以被查询。
  10. -->
复制代码
      页面缓存设置Meta

        
  1. <!-- 清除缓存 -->
  2. <meta http-equiv="pragma" content="no-cache">
  3. <meta http-equiv="cache-control" content="no-cache">
  4. <meta http-equiv="expires" content="0">
复制代码
      常见问题

  移动端字体设置

        
  1. /*中英字体名对照表
  2. 宋体      SimSun
  3. 黑体      SimHei
  4. 微信雅黑   Microsoft Yahei
  5. 微软正黑体 Microsoft JhengHei
  6. 新宋体    NSimSun
  7. 新细明体  MingLiU
  8. 细明体    MingLiU
  9. 标楷体    DFKai-SB
  10. 仿宋     FangSong
  11. 楷体     KaiTi
  12. 仿宋_GB2312  FangSong_GB2312
  13. 楷体_GB2312  KaiTi_GB2312  
  14. 说明:中文字体多数使用宋雅黑,英文用Helvetica
  15. */
  16. body { font-family: Microsoft Yahei,SimSun,Helvetica; }
复制代码
      打电话发短信写邮件

        
  1. // 打电话
  2. <a href="tel:010-88888">打电话给:010-88888</a>
  3. //  发短信
  4. <a href="sms:88888">发短信给: 88888</a>
  5. // 写邮件
  6. //注:在添加这些功能时,第一个功能以"?"开头,后面的以"&"开头
  7. //1.普通邮件
  8. <a href="mailto:[email protected]">快来点我啊,给你发种子。</a>
  9. //2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
  10. <a href="mailto:[email protected][email protected]">快来点我啊,给你发种子。</a>
  11. //3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)
  12. <a href="mailto:[email protected][email protected]&[email protected]">快来点我啊,给你发种子。</a>
  13. //4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址
  14. <a href="mailto:[email protected];[email protected]">快来点我啊,给你发种子。</a>
  15. //5.包含主题,用?subject=
  16. <a href="mailto:[email protected]?subject=邮件主题">快来点我啊,给你发种子。</a>
  17. //6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行
  18. <a href="mailto:[email protected][email protected],这是我是第三行。">快来点我啊,给你发种子。</a>
  19. //7.内容包含链接,含http(s)://等的文本自动转化为链接
  20. <a href="mailto:[email protected]?body=http://www.wtf.com">快来点我啊,给你发种子。</a>
  21. //8.内容包含图片(PC不支持)
  22. <a href="mailto:[email protected]?body=<img src='images/torrent.jpg' />">快来点我啊,给你发种子。</a>
  23. //9.完整示例
  24. <a href="mailto:[email protected];[email protected][email protected]&[email protected]&subject=[邮件主题]&body=我是第一行内容%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">快来点我啊,给你发种子。</a>
复制代码
      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 浏览器会将网页缩放至原始比例。
   原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接 <a href="#"></a> ,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。
  造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
  解决方案:
  
       
  • fastclick   
  • zepto的 touch模块  
  点击元素产生背景或边框问题

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

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

        
  1. /*禁止长按链接与图片弹出菜单*/
  2. a,img { -webkit-touch-callout: none }   
  3. /*禁止ios和android用户选中文字*/
  4. html,body {-webkit-user-select:none; user-select: none; }
  5. /*改变输入框placeholder的颜色值*/
  6. ::-webkit-input-placeholder { /* WebKit browsers */
  7. color: #999; }
  8. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  9. color: #999; }
  10. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  11. color: #999; }
  12. :-ms-input-placeholder { /* Internet Explorer 10+ */
  13. color: #999; }
  14. input:focus::-webkit-input-placeholder{ color:#999; }
  15. /*android上去掉语音输入按钮*/
  16. input::-webkit-input-speech-button {display: none}
复制代码
      禁用input在ios下,输入英文首字母的默认大写

        
  1. <input autocapitalize="off" autocorrect="off" />
复制代码
      屏幕旋转的事件和样式

  JS处理:
        
  1. function orientInit(){
  2.     var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
  3.     if(orientChk =='lapdscape'){
  4.         //横屏下需要执行代码
  5.     }else{
  6.         //竖屏下需要执行代码
  7.     }
  8. }
  9. orientInit();
  10. window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
  11.     setTimeout(orientInit, 100);
  12. },false)
复制代码
      CSS处理:
        
  1. <!-- 搜索引擎索引方式:通常有如下几种取值:none,noindex,nofollow,all,index和follow。-->
  2. <meta name="robots" content="index,follow" />
  3. <!--
  4.     all:文件将被检索,且页面上的链接可以被查询;
  5.     none:文件将不被检索,且页面上的链接不可以被查询;
  6.     index:文件将被检索;
  7.     follow:页面上的链接可以被查询;
  8.     noindex:文件将不被检索;
  9.     nofollow:页面上的链接不可以被查询。
  10. -->
  11. 0
复制代码
      播放视频不全屏

        
  1. <!-- 搜索引擎索引方式:通常有如下几种取值:none,noindex,nofollow,all,index和follow。-->
  2. <meta name="robots" content="index,follow" />
  3. <!--
  4.     all:文件将被检索,且页面上的链接可以被查询;
  5.     none:文件将不被检索,且页面上的链接不可以被查询;
  6.     index:文件将被检索;
  7.     follow:页面上的链接可以被查询;
  8.     noindex:文件将不被检索;
  9.     nofollow:页面上的链接不可以被查询。
  10. -->
  11. 1
复制代码
      消除transition闪屏

        
  1. <!-- 搜索引擎索引方式:通常有如下几种取值:none,noindex,nofollow,all,index和follow。-->
  2. <meta name="robots" content="index,follow" />
  3. <!--
  4.     all:文件将被检索,且页面上的链接可以被查询;
  5.     none:文件将不被检索,且页面上的链接不可以被查询;
  6.     index:文件将被检索;
  7.     follow:页面上的链接可以被查询;
  8.     noindex:文件将不被检索;
  9.     nofollow:页面上的链接不可以被查询。
  10. -->
  11. 2
复制代码



上一篇:Common React Native App Layouts: Calendar Page
下一篇:infinite scrolling grid in angular 2
南白 发表于 2016-11-30 21:48:22
楼下的,觉得比特币咋样啊?
回复 支持 反对

使用道具 举报

搜狗站长网f 发表于 2016-12-1 00:07:26
在街上看美女,高一点就是欣赏;低一点就是流氓。
回复 支持 反对

使用道具 举报

qdsunhui 发表于 2016-12-13 06:17:18
边撸边过
回复 支持 反对

使用道具 举报

扯不掉的面具 发表于 2016-12-16 18:31:11
占坑编辑ing
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读

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

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

返回顶部 返回列表