• 移动web开发经验总结(转)


    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

  • 相关阅读:
    eclipse export runnable jar(导出可执行jar包) runnable jar可以执行的
    mave常用指令
    771. Jewels and Stones珠宝数组和石头数组中的字母对应
    624. Maximum Distance in Arrays二重数组中的最大差值距离
    724. Find Pivot Index 找到中轴下标
    605. Can Place Flowers零一间隔种花
    581. Shortest Unsorted Continuous Subarray连续数组中的递增异常情况
    747. Largest Number At Least Twice of Others比所有数字都大两倍的最大数
    643. Maximum Average Subarray I 最大子数组的平均值
    414. Third Maximum Number数组中第三大的数字
  • 原文地址:https://www.cnblogs.com/ling-du/p/4884282.html
Copyright © 2020-2023  润新知