移動Web輕拍背景顏色？

我想在我的網絡應用上實現點擊背景色效果，就像本地應用那樣（例如iOS的gmail - 點擊點擊電子郵件時，背景突出顯示爲藍色）。移動Web輕拍背景顏色？

CSS：活動在Android上效果很好。

對於iOS 9.3，蘋果刪除了350ms的延遲時間，我非常激動地發現它！我興奮地刪除了fastclick.js。但是，當用戶點擊時，：活動似乎不起作用！他們的開發者論壇是一個笑話。沒人在乎。

我試着再次添加fastclick.js，這使得：在iOS上重新開始工作 - 但隨後它會在滾動上觸發。

本機可能會有50ms的延遲，所以只有在點擊鏈接時纔會突出顯示。

我認爲這個CSS的目的是爲了這個目的：

-webkit-tap-highlight-color: #eee;

然而，當我嘗試（在iOS 9.3的Safari）使用，它涵蓋了所有的元素上的內容（文本）（整個元素變成灰色，文字和全部）。我錯過了什麼嗎？爲什麼在使用這個時，div/element的全部內容會被覆蓋？它的常見用法不是背景顏色嗎？

更新：我已經在下面推出了我自己的解決方案。希望這可以幫助那些使用網絡應用程序的人。

來源

2016-03-25 gregblass

首先，活動工作正常在Chrome的鉻爲我儘可能告訴。看來，他們已經在操作系統級別上實現了延遲。

第二：如上所述，我嘗試將fastclick.js添加到iOS中，以便：即使在任何情況下都可以工作。一旦添加，我至少可以得到：積極的工作 - 但它會嘗試滾動時激活。

所以，因爲蘋果對待web應用程序像二等公民，這是我用我的生產應用的哪些方面：

CSS：

// Android (or anything else, which I'm not really concerned about) 
// Simply use CSS! Android has built in delay to prevent trigger on scroll 
body:not(.ios) { // Adding a body class using Rails 'browser' gem 
    .list a:active { 
    background-color: #f5f5f5; 
    } 
} 

// iOS only. :active would trigger on scroll (Apple treats web apps like 2nd class citizens) 
body.ios { 
    .list a.touch { 
    background-color: #f5f5f5; 
    } 
}

的JavaScript/jQuery的：

// iOS only 
// Roll our own delay so background color doesn't trigger on scroll 
if(navigator.userAgent.match(/(iPad|iPhone)/g) != null) { 

    var addTouch; 
    $('.list a').on('touchend', function() { 
    $(this).removeClass('touch'); 
    clearTimeout(addTouch); 
    }).on('touchmove', function() { 
    $(this).removeClass('touch'); 
    clearTimeout(addTouch); 
    }).on('touchstart', function() { 
    var that = $(this); 
    addTouch = setTimeout(function() { 
     that.addClass('touch'); 
    }, 40); 
    }); 
}

讓我用這句話來完成這個解決方案：這絕對是荒謬的。蘋果 - 感謝您取消350毫秒觸摸延遲：太棒了！但是，請修正CSS：主動滾動是可能的，就像Google一樣。

來源

2016-03-25 20:04:03 gregblass

移動Web輕拍背景顏色？

回答

相關問題