但是，如果您的網(wǎng)站實(shí)際上已經(jīng)足夠響應(yīng)并包含加載數(shù)據(jù)的效果了怎么辦？或者您使用Angular，React或Vue，并且很多UX交互是瞬時(shí)的？陰影單擊效果可能會(huì)影響您的用戶體驗(yàn)。

你可以在樣式表中使用以下代碼來擺脫這種陰影單擊效果。不用擔(dān)心，即使您需要將其作為全局樣式添加，它也不會(huì)破壞其他任何內(nèi)容。

* { 

 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

2. 使用用戶代理檢測用戶是否從移動(dòng)設(shè)備訪問

我不是在談?wù)撫槍挾刃∮?00px的設(shè)備放棄特定于樣式表的 @media 代碼。相反。您應(yīng)該始終使用樣式表來使網(wǎng)站移動(dòng)友好。

但是，如果要根據(jù)用戶是否在移動(dòng)設(shè)備上顯示其他效果，該怎么辦？你希望將它包含在JavaScript函數(shù)中——并且您不希望在用戶更改其智能手機(jī)方向(將寬度增加到600px以上)時(shí)更改它。

對于這種情況，我的建議是使用可全局訪問的Helper函數(shù)，該函數(shù)根據(jù)瀏覽器的用戶代理確定用戶設(shè)備是否為移動(dòng)設(shè)備。

$_HelperFunctions_deviceIsMobile: function() {
 if (/Mobi/i.test(navigator.userAgent)) {
    return true;
 } else 

    {return false;
 }      
}

3. 加載移動(dòng)版本的較大的圖像

如果你使用大圖像，并且想要確保移動(dòng)設(shè)備上的加載時(shí)間仍然適合你的移動(dòng)用戶，請始終加載不同版本的圖像。

在你的CSS文件中，定義 mobile-only 和 nomobile。

.mobile-only {   display: none; }
@media (max-width: 599px) {
 ...
 .nomobile {display: none;}
 .mobile-only {display: initial;}
}

4. 嘗試無限滾動(dòng)和延遲加載的數(shù)據(jù)

如果您有大型列表，則應(yīng)考慮在用戶向下滾動(dòng)時(shí)延遲加載更多數(shù)據(jù)，而不是顯示“加載更多或顯示更多”按鈕。原生應(yīng)用程序通常包括這樣的延遲加載的無限滾動(dòng)功能。

在移動(dòng)web中使用Javascript框架實(shí)現(xiàn)這一點(diǎn)并不難。您可以在模板中的元素上添加引用（$ref）或僅依賴于窗口的絕對滾動(dòng)位置。

以下代碼顯示了如何在Vue應(yīng)用中實(shí)現(xiàn)這種效果?？梢栽谄渌蚣埽ɡ鏏ngular或React）中添加類似的代碼。

mounted() {
 this.$nextTick(function() {
    window.addEventListener('scroll', this.onScroll);
    this.onScroll(); // 需要初始加載頁面
 });        
},
beforeDestroy() {
  window.removeEventListener('scroll', this.onScroll);
}

如果用戶滾動(dòng)到某個(gè)元素或頁面底部，則onScroll函數(shù)將加載數(shù)據(jù)：

onScroll() {    
  var users = this.$refs["users"];
  if (users) {
     var marginTopUsers = usersHeading.getBoundingClientRect().top;
     var innerHeight = window.innerHeight;
     if ((marginTopUsers - innerHeight) < 0) {
         this.loadMoreUsersFromAPI();
     }                               

  }  
}

5. 使模態(tài)和彈出窗口全屏或全屏顯示

手機(jī)屏幕的空間有限。有時(shí)，開發(fā)人員會(huì)忘記這一點(diǎn)，并使用與桌面版本相同的界面類型。尤其是模態(tài)窗口，如果不正確的實(shí)現(xiàn)，對移動(dòng)用戶來說是個(gè)關(guān)卡。

模式窗口是你疊加在頁面其他內(nèi)容之上的窗口。對于桌面版用戶，他們可以很好地工作。

由于屏幕空間有限，大型公司的移動(dòng)網(wǎng)頁應(yīng)用（如Youtube或Instagram）設(shè)計(jì)得很好的移動(dòng)網(wǎng)頁應(yīng)用都會(huì)把模態(tài)做為全寬或全屏，在模態(tài)的頂部有一個(gè) ”X“ 來關(guān)閉。

注冊功能尤其如此，在桌面版本中，注冊功能是普通模式窗口，而在移動(dòng)版本中，則是全屏模式。

到此，相信大家對“Web前端必知的優(yōu)化技巧有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！