zoukankan      html  css  js  c++  java
  • html5 经验记录 持续更新

    1 关于page cache

      由于移动端浏览器webkit基本都实现了page cache(火狐叫做back-forwoad cache);所以回退操作基本不会触发onload操作了,不过上一页的状态事件都会保存,一般情况下不会出问题,如果需要每次展现都触发事件可以考虑pageshow事件。

      但是在三星s3上发现了一个问题,就是直接给dom设置属性的时候(这里指的是dom.prop = value 这种类型的,而不是attribute。)点击后退时原生的浏览器这个属性会丢失,而awen在有些库里用到了这种方式。。。所以悲剧了。后来不得不改为attribute。

      ps:某日awen意外 的发现如果引入自己写的sjs库,这个问题奇怪的消失了....看来还有待研究,日后给出解释

    2 pointer-events

      被悬浮元素盖住的元素基本是无法触发鼠标事件的。一般情况下比较符合要求,但是有时候我们需要触发怎么办?比如说地图。css3中有个样式叫做:pointer-events可以解决,他的值如下:

    • auto------- 默认值,鼠标不会穿透当前层
    • none------ 元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
    • 其它属性值是针对SVG

      兼容性:Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持,Opera在SVG中支持该属性但是HTML中不支持。不过值得庆幸的是,andorid和ios中基本都支持。

    3 webkit取消默认的效果

      常用的如下几个: 

      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   //取消点击选取背景色
      -webkit-user-drag:none;           //取消拖拽
      -webkit-user-select:none;           //取消用户选取

      更详细的说明,看这里:http://ued.ctrip.com/blog/wp-content/webkitcss/

    4 touchmove & e.preventDefault

      大家都知道在手机上这个方法的重要性。也知道android的不连续触发touchmove的bug,但是android上会有点同样需要注意(只是个人见解,欢迎探讨涨姿势)。

      手指touchup之前:如果第一次触发touchmove的时候你调用了e.preventDefault方法,之后整个move的过程系统都不会再处理,哪怕你把该方法写在了判断里,相反如果第一次触发touchmove你没有调用e.preventDefault,那么你想在之后的touchmove触发时不再e.preventDefault那是没门的。

      也就是说,android上的touchmove在手指离开屏幕之前,是否取消系统默认事件,只取决于第一次触发touchmove时你有没有调用e.preventDefault.

      模拟一种场景,按钮点击,如果我判断移动一段距离之前调用e.preventDefault,出了该距离就不阻止默认事件,基本是没效果的。他只会取决于你第一次touchmove的时候你的判断是不是需要e.preventDefault,来决定之后整个手指在屏幕上的响应是给系统(比如滚动条)还是给你自己操作。

    5  quojs&jQ.Mobi的设备判断

       判断系统时我的中兴的原生浏览器居然说不是移动设备,我去。看看了quojs源码中的代码:

        

    复制代码
     SUPPORTED_OS = {
          Android: /(Android)s+([d.]+)/,
          ipad: /(iPad).*OSs([d_]+)/,
          iphone: /(iPhonesOS)s([d_]+)/,
          Blackberry: /(BlackBerry|BB10|Playbook).*Version/([d.]+)/,
          FirefoxOS: /(Mozilla).*Mobile[^/]*/([d.]*)/,
          webOS: /(webOS|hpwOS)[s/]([d.]+)/
        };
    复制代码

        红色部分有问题,因为中兴的userAgent中"Android"和版本使用'/'间隔的。所以上面红色部分应改为:Android: /(Android)[s/]+([d.]+)/,不知道别的手机是不是也有类似的问题呢?总有些oem厂商强大的就是不走寻常路。

     6 fixed on mobile

      ”position:fixed“的效果有目共睹,在移动设备上除了android2.2以上和ios的5.0之后的版本效果还好,但是在这之前,很多人都被高的郁闷不已。

      根据苹果官方文档,当页面上设置了viewport的meta声明之后。手指移动时其实移动的是viewport(抽象出页面),而fixed是针对于页面的,所以当手指移动式,其实页面并没有发生变化,从而导致看上去fixed无效。

      对此,jquery mobile用的中规中矩的随着手指一动改变top或者left的位置。sencha touch 和 twitter做的就比较新颖,基本摒弃了viewport的作用了,就像一些实现的滚动条插件的做法。用translate的方法来改变内部元素的位置。这样一来手指滑动的时候,页面和viewport其实都没有移动。

    7 translate3d的妙用

      有时候在使用css3变换的时候,经常发现页面会发生闪现的情况,这是因为css3变化的时候影响页面渲染造成了非常短暂的卡顿。方法是使用translate3d();来将元素浮出原ui层,这样既可以尽可能的利用硬件加速。上面说的sencha touch 和 twitter都用到了类似处理。

    8 css3动画防抖

      有时候在做css3动画的时候页面会闪一下,跟上面提到的差不多, 那么可以使使用 '-webkit-backface-visibility' = 'hidden' 或者 "-webkit-perspective: 1000;" 来防止页面抖动。别忘了使用浏览器私有属性hack

    9 css透明

      很多人觉得,移动开发可以放心opacity了,但是值得注意的是,有时候在有些机器上(android),图片opacity会造成大块的黑色阴影块,第一次碰到的时候直接麻爪了,后来发现是opacity搞的鬼,换成rgba就可以解决了

    10 uploadify引起chrome崩溃

      很好用的上传工具,可以个问题差点让我崩溃,chrome下会经常出现崩溃。原因不明,大概是chrome缓存了uploadify的某些变量,重新载入时引起js bug。解决办法就是给uploadify的js源文件加时间戳版本号,每次请求新的。。。。

    11 android addJavascriptInterface 失效

      js调用java的时候,如果测试机器的sdk version >=17  并且应用设置了targetSdkVersion>=17时如果你不加@JavascriptInterface 注解就会出现这一问题。

    12 android中注册的javascript桥接类参数个数需谨慎

      js往webview中注册的js方法,在webview中被js调用的时候,切记参数个数必须完全一致,做js的不限参数使用惯了这里经常会出错。

    13 android4.4 以上的 webview中图片不显示 

      再android4.4版本之前,我们经常设置 setBlockNetworkImage(true) 来将图片的渲染放在dom加载最后从而提升性能,但是从4.4之后这个属性导致了webview中的图片不能再被加载,原因不明,解决办法,直接设成false或者不设置,当然你也可以判断版本来设置:

    if(Build.VERSION.SDK_INT<19){
     ws.setBlockNetworkImage(true);
    }

     14 android4.4  webview页面 onActivityResult  页面刷新

      目前本人测试事4.4中,activity发起startActivityForResult,结果回到当前页时,如果布局中有webview,那么页面会刷新,这时候如果你再onActivityResult中执行js方法(loadUrl("javascript:..")) 你就会悲催的发现报错,方法不存在。

         可能设置页面不刷新能解决,但是我没找到,cache也不管用,所以用了笨办法,如果是sdk>18 则生成一个运行js的Runnable置于全局,每次页面加载完成时判断这个专用于sdk19以上的Runnable!=null,则执行并置空。

  • 相关阅读:
    pipelinewise 学习二 创建一个简单的pipeline
    pipelinewise 学习一 docker方式安装
    Supercharging your ETL with Airflow and Singer
    ubuntu中使用 alien安装rpm包
    PipelineWise illustrates the power of Singer
    pipelinewise 基于singer 指南的的数据pipeline 工具
    关于singer elt 的几篇很不错的文章
    npkill 一个方便的npm 包清理工具
    kuma docker-compose 环境试用
    kuma 学习四 策略
  • 原文地址:https://www.cnblogs.com/cczw/p/3476646.html
Copyright © 2011-2022 走看看