zoukankan      html  css  js  c++  java
  • 移动web开发经验总结(1) (转)

    1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。

    2.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios点击元素时出现的阴影。

    3.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。

    4.-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,会产生很多见所未见的bug。

    5.@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。

    6.-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。

    7.多用text-shadow这个属性,可以美化文字效果, border-radius、box-shadow、gradient、border-image,在移动端都可以很好的支持,使用这些属性可以实现很炫丽的按钮。

    8.android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具(iScroll)实现。

    10.ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

    11.css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。

    12.input框会默认呼出,如果想隐藏键盘让其失焦即可。

    13.当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。

    14.使用iScroll的时候,在部分手机(部分小米、三星机型)中click会执行两次,是因为iscroll在判断滑动前,阻止了click事件,然后在滑动后,对原来的click事件进行了重构,在一些设备上并没有将默认的click阻止掉。所以,出现了类似双击的现象。

    解决方案:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    //1.自己写一个fn-->myclick,然后onclick="myclick();"调用。
    var t1 = null;//这个设置为全局
    function myclick(){
        if (t1 == null){
            t1 = new Date().getTime();
        }else{      
            var t2 = new Date().getTime();
            if(t2 - t1 < 500){
                t1 = t2;
                return;
            }else{
                t1 = t2;
            }
        }
        /*自己的代码*/
    }
     
    //2.上面的代码,也可以写在iscroll.js(4.2.5)的_end方法中,要注意var t1是全局的
    //3.国外论坛在iscroll.js(4.2.5)对应位置添加
    topOffset: 0,
    checkDOMChanges: false,   // Experimental
    handleClick: true,
    preventGhostClick: false, // prevent ghost clicks?防止2次点击
    ghostClickTimeout: 500,   // timeout for ghost click prevention设置时间差
     
    /**
    * Prevents any real clicks.
    * See preventGhostClick portion of _end().
    */
    _preventRealClick: function(e) {
        if (e._fake !== true) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            e.cancel = true;
            return false;
        }
    },
    _end: function (e) {......
     
    ev._fake = true;
    if (that.options.preventGhostClick) { //preventGhostClick: true,
        // prevent ghost real clicks on body
        document.body.addEventListener('click', that._preventRealClick, true);
        // until ghost click timeout expires
        setTimeout(function () {
                  document.body.removeEventListener('click', that._preventRealClick, true);
        }, that.options.ghostClickTimeout);
    }
    target.dispatchEvent(ev);
     
    //4.使用zepto的tap替换click

    15.iOS中禁止用户保存图片、复制图片,img标签指定-webkit-touch-callout为none可以禁止设备弹出列表按钮,这样用户就无法保存/复制你的图片。

    16.使用-webkit-user-select: none; 禁止用户进行复制, 选择。

    http://www.cnblogs.com/ppforever/p/4878482.html

  • 相关阅读:
    ant 软件包不存在报错
    在 Internet Explorer 中使用 Windows 窗体控件
    智能客户端
    Back to the Future with Smart Clients
    "Automation 服务器不能创建对象" 的解决方案
    Top 10 Reasons for Developers to Create Smart Clients
    Updater Application Block for .NET
    Smart Client Application Model and the .NET Framework 1.1
    Security and Versioning Models in the Windows Forms Engine Help You Create and Deploy Smart Clients
    智能客户端技术总结(二)
  • 原文地址:https://www.cnblogs.com/softidea/p/4915245.html
Copyright © 2011-2022 走看看