亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

移動(dòng)常見疑難問題

KevinYan / 1058人閱讀

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

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

UI小姐姐要求的0.5px線

原因：不同手機(jī)的兼容不一樣，尤其安卓
IOS的Safari表現(xiàn)是比較好的，safari是可以支持浮點(diǎn)型的屬性的。因此在IOS的系統(tǒng)中，0.5px是可以實(shí)現(xiàn)的。但在Andriod手機(jī)下，有些Andriod系統(tǒng)的瀏覽器，會(huì)對(duì)浮點(diǎn)型數(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，線條四周看起來會(huì)淡很多，或許能騙過小姐姐。

點(diǎn)擊穿透問題

原因：移動(dòng)瀏覽器提供一個(gè)特殊的功能：雙擊（double tap）放大。導(dǎo)致了著名300ms的時(shí)間延遲問題。click是在touch系列事件發(fā)生后大約300ms才觸發(fā)的，混用touch和click就會(huì)導(dǎo)致點(diǎn)透問題。

方案一：300毫秒之后再消失彈窗，做個(gè)動(dòng)畫消失效果過渡。

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

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

// html

    



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

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

方案四：頁面全部點(diǎn)擊事件換成click，這樣會(huì)感覺慢慢慢

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

Android 瀏覽器文本垂直居中

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

方案一：放大兩倍，再用 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ù)。

// 安卓手機(jī)，鍵盤擋住輸入框
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("安卓兼容鍵盤擋住輸入框報(bào)錯(cuò)", e);
        }
    })
}


fixed+Input

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

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

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滾動(dòng)的問題。

禁止蒙層底下頁面跟隨滾動(dòng)

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

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

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


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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106357.html

相關(guān)文章

  • 移動(dòng)常見疑難問題

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

    klivitamJ 評(píng)論0 收藏0

  • 我在移動(dòng)端上遇到的那些疑難雜癥

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

    warmcheng 評(píng)論0 收藏0

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

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

    CoreDump 評(píng)論0 收藏0

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

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

    gecko23 評(píng)論0 收藏0

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

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

    Keagan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<