移動常見疑難問題

KevinYan 發布于2019-08-26 10:33 / 1004人閱讀

摘要：是在系列事件發生后大約才觸發的，混用和就會導致點透問題。獲取視圖原始高度方案二能較好地處理滾動的問題。禁止蒙層底下頁面跟隨滾動原因彈窗是常見的交互方式，而蒙層是彈窗必不可少的元素。

平時的開發過程中，經常會遇到一些疑難雜癥，在這里記錄一下常用的解決方案。

UI小姐姐要求的0.5px線

原因：不同手機的兼容不一樣，尤其安卓
IOS的Safari表現是比較好的，safari是可以支持浮點型的屬性的。因此在IOS的系統中，0.5px是可以實現的。但在Andriod手機下，有些Andriod系統的瀏覽器，會對浮點型數據執行四舍五入的情況，即給元素設置border-width:0.5px，那么其表現與你設置border-width:1px;是相同的。

方案一：放大2倍再縮小

// 放大再縮小
&:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #565D66;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

方案二：修改透明度為0.5，線條四周看起來會淡很多，或許能騙過小姐姐。

點擊穿透問題

原因：移動瀏覽器提供一個特殊的功能：雙擊（double tap）放大。導致了著名300ms的時間延遲問題。click是在touch系列事件發生后大約300ms才觸發的，混用touch和click就會導致點透問題。

方案一：300毫秒之后再消失彈窗，做個動畫消失效果過渡。

setTimeout(() => {
    dialog.close();
}, 300);

方案二：touchStart后300ms都被一個透明不可見的div去覆蓋，第二個click是點不到對應的a。

// html

    


// js
function onDeviceReady() {
    setTimeout(function(){ $("#preventClick").hide(); }, 300);
}

方案三：使用fastClick，個人認為最好最簡單的方法

方案四：頁面全部點擊事件換成click，這樣會感覺慢慢慢

方案五：頁面全部事件換成touch事件，但需要注意的是a標簽的href也是click。

Android 瀏覽器文本垂直居中

原因：在開發中，常使用 line-height 屬性來實現文本的垂直居中，但是在安卓瀏覽器渲染中有一個常見的兼容問題，就是對于小于12px的字體，尤其是奇數的字體大小，使用 line-height 屬性進行垂直居中的時候，渲染出來的效果會偏上一些。

方案一：放大兩倍，再用 scale 進行縮小一倍

div {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0%, 0%;
}

方案二：使用table布局

// html
// 需要在外面套一層

    aaa


// css
.wrap {
    display: table;
}
.content {
    font-size: 10px;
    display:table-cell;
    vertical-align: center;
}

輸入框 focus 以后，軟鍵盤遮擋輸入框的情況

嘗試 input 元素的 scrollIntoView 進行修復。

// 安卓手機，鍵盤擋住輸入框
if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener("click", function () {
        try{
          if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
              var inputType = document.activeElement.type;
              if(inputType == "checkbox") return;
              setTimeout(function() {
                document.activeElement.scrollIntoView(true);
              }, 0)
          }
        }catch(e){
          console.log("安卓兼容鍵盤擋住輸入框報錯", e);
        }
    })
}

fixed+Input

原因：ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位。在某些安卓機下，鍵盤彈起會引起窗口高度（html標簽的高度）變小，而fixed定位是相對于html根元素的，所以會被頂上來了。

方案一：彈起軟鍵盤的時候，把fixed定位的元素改成block，回歸文檔流，當輸入框失去焦點時，又變成fixed定位，還要把滾動條距離記錄下。

var screenHeight = document.body.offsetHeight; // 獲取視圖原始高度
window.onresize = function(){
    if (document.body.offsetHeight < screenHeight) {
        document.getElementsByTagName("nav")[0].style.display = "none";
    }else{
        document.getElementsByTagName("nav")[0].style.display = "block";
    }
};

方案二：iscroll能較好地處理fixed滾動的問題。

禁止蒙層底下頁面跟隨滾動

原因：彈窗是常見的交互方式，而蒙層是彈窗必不可少的元素。但是，在蒙層元素過長滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動。這是因為觸發了冒泡，使得父元素跟著滾動。

方案：很簡單，防止出現冒泡即可。設置滾動容器和彈窗為同級節點。

// css
#root{
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

GPU云服務器云服務器疑難問題常見問題 cdn常見問題cdn常見容器常見問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106357.html

移動常見疑難問題

摘要：是在系列事件發生后大約才觸發的，混用和就會導致點透問題。獲取視圖原始高度方案二能較好地處理滾動的問題。禁止蒙層底下頁面跟隨滾動原因彈窗是常見的交互方式，而蒙層是彈窗必不可少的元素。平時的開發過程中，經常會遇到一些疑難雜癥，在這里記錄一下常用的解決方案。 UI小姐姐要求的0.5px線原因：不同手機的兼容不一樣，尤其安卓 IOS的Safari表現是比較好的，safari是可以支持浮...

klivitamJ 2019-08-30 15:44 評論0 收藏0
我在移動端上遇到的那些疑難雜癥

摘要：工作一年多了，相信在座的各位前端也都跟我一樣，對在手機上，特別是上出現的各種兼容性感到非常頭疼。這篇文章僅作為一份記錄供大家參考。我們可以在這個代碼的基礎上加上媒體查詢來完善它工作一年多了，相信在座的各位前端也都跟我一樣，對在手機上，特別是iphone上出現的各種兼容性感到非常頭疼。這篇文章僅作為一份記錄供大家參考。如何畫出 1px 的線？首先問大家一個問題，如何在iphone上...

warmcheng 2019-08-23 18:01 評論0 收藏0
Mac聯機調試移動端頁面方法和移動端IOS遇到的兼容性問題

摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機的表現也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。移動端IOS遇到的兼容性問題和 Mac聯機調試方法有時候遇到一些移動端「疑難雜癥」，因為移動端不方便調試，可能找不到問題點，所以經常需要電腦端和移動端聯機調試，...

CoreDump 2019-08-23 13:46 評論0 收藏0
那些年，前端學習之路的疑難雜癥（四）：面試中遇到的3個問題概覽

摘要：閉包能用來實現私有化和創建工廠函數等作用。關于閉包的常見面試題是這樣的寫一個函數，循環一個整數數組，延遲秒打印這個數組中每個元素的索引。文章來源：http://mp.weixin.qq.com/s/vs0... 前言在公眾號上看到了這篇文章，覺得很有用，有助于理解JS學習中的一些重點難點。決定把它整理下發布出來。該文章主要介紹了JS中的三個問題。在以后的幾篇文章里，我會詳細介紹這三...

gecko23 2019-08-20 15:08 評論0 收藏0
JavaScript疑難雜癥系列-事件循環

摘要：而之后事件循環一直會去遍歷任務隊列，一旦有任務放入就會放入主線程中執行。任務隊列所謂任務是返回的一個個通知，讓主線程在讀取任務隊列的時候得知這個異步任務已經完成，下一步該執行這個任務的回調函數了。 javascript單線程瀏覽器端，復雜的UI環境會限制多線程語言的開發。例如，一個線程在操作一個DOM元素時，另一個線程需要去刪除DOM元素，這個之間就需要進行狀態的同步，何況前端可能不...

Keagan 2019-08-26 17:15 評論0 收藏0