成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動常見疑難問題

KevinYan / 1015人閱讀

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

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

UI小姐姐要求的0.5px線

原因：不同手機的兼容不一樣，尤其安卓
IOS的Safari表現(xiàn)是比較好的，safari是可以支持浮點型的屬性的。因此在IOS的系統(tǒng)中，0.5px是可以實現(xiàn)的。但在Andriod手機下，有些Andriod系統(tǒng)的瀏覽器，會對浮點型數(shù)據(jù)執(zhí)行四舍五入的情況，即給元素設(shè)置border-width:0.5px，那么其表現(xiàn)與你設(shè)置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）放大。導(dǎo)致了著名300ms的時間延遲問題。click是在touch系列事件發(fā)生后大約300ms才觸發(fā)的，混用touch和click就會導(dǎo)致點透問題。

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

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

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

// html

    



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

方案三：使用fastClick，個人認(rèn)為最好最簡單的方法

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

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

Android 瀏覽器文本垂直居中

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

方案一：放大兩倍，再用 scale 進(jìn)行縮小一倍

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 進(jìn)行修復(fù)。

// 安卓手機，鍵盤擋住輸入框
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標(biāo)簽的高度）變小，而fixed定位是相對于html根元素的，所以會被頂上來了。

方案一：彈起軟鍵盤的時候，把fixed定位的元素改成block，回歸文檔流，當(dāng)輸入框失去焦點時，又變成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滾動的問題。

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

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

方案：很簡單，防止出現(xiàn)冒泡即可。設(shè)置滾動容器和彈窗為同級節(jié)點。

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


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106357.html

相關(guān)文章

  • 移動常見疑難問題

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

    klivitamJ 評論0 收藏0

  • 我在移動端上遇到的那些疑難雜癥

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

    warmcheng 評論0 收藏0

  • Mac聯(lián)機調(diào)試移動端頁面方法 和 移動端IOS遇到的兼容性問題

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

    CoreDump 評論0 收藏0

  • 那些年，前端學(xué)習(xí)之路的疑難雜癥（四）：面試中遇到的3個問題概覽

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

    gecko23 評論0 收藏0

  • JavaScript疑難雜癥系列-事件循環(huán)

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

    Keagan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<