国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

web前端 —— 移動端知識的一些總結

BetaRabbit / 1873人閱讀

摘要:打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦,比較缺人,機會多多廣告位長期有效,有興趣簡歷我郵箱個人在移動端的一些總結歸納,有新的知識點會一直更新一部分用做動畫時,變形盡量通過來實現,而不是用,等屬性。不過的事件有一個事件穿透的問題。

打個招聘廣告: 杭州 阿里巴巴B2B 招前端(想去西溪的也可幫推薦),比較缺人,機會多多!廣告位長期有效,有興趣簡歷我郵箱:854936875@qq.com

個人在移動端的一些總結歸納,有新的知識點會一直更新

一.css部分

1.用transition做動畫時,變形盡量通過transform來實現,而不是用height,width等屬性。transform可明顯減少重繪、重畫

1.meta標簽


移動端加上這個標簽才是真正的自適應,不加的話,假如你把一個980px寬度(手機端常規是980)的PC網頁
放在手機上顯示,倒也能正常顯示不出現滾動條,不過是移動設備對頁面 做了縮小優化,所以字體等都相應縮小了
(980px是相對于手機像素的,我的是超過1000px多一些就出現滾動條了,這個沒具體研究)。

關于  initial-scale=1 ,這個參照iphone5的尺寸320*568,如果你頁面按照640*1136做的話,scale就設為0.5                     
   IOS中safari允許全屏瀏覽

  IOS中Safari頂端狀態條樣式

  忽略將數字變為電話號碼

   忽略識別email

2.圖片尺寸
做全屏顯示的圖片時,一般為了兼容大部分的手機,圖片尺寸一般設為640*960(我是覺得這個尺寸好,也看不少的圖片也是這個尺寸,視情況而定)

3.去除webkit的滾動條

element::-webkit-scrollbar{
   display: none;
}
如果要去除全部的,就把`element`去掉
同時這個屬性可讓在`div`里的滾動如絲般順滑:`-webkit-overflow-scrolling : touch`;  

4.去除buttonios上的默認樣式

-webkit-appearance: none;
border-radius: 0 

5.placeholder元素樣式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

6.不想讓按鈕touch時有藍色的邊框或半透明灰色遮罩(根據系統而定)

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

7.在移動端做動畫效果的話,如果通過改變絕對定位的top,或者margin的話做出來的效果很差,很不流暢,而使用css3transitiontransform或者animation的效果將會非常棒(這一方面IOSandroid又要好不少)。
如果用**3d(translate3d)來實現動畫,會開啟GPU加速,動畫會更加流暢,但硬件配置差的安卓用起來會耗很多性能

8.使用圖片時,會發現圖片下總是有大概4px的空白,(原因據說圖片是inline,觸發baseline什么的。。。)常用解決方法有

img{display:block};
img{vertical-align:top}

也可取其他幾個值,視情況而定
其他解決辦法 見此

9.關于使用彈性盒子box布局
暫時有三種方案:

display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 過渡版本
display:-webkit-flex; // 最新的版本

我暫時使用的是 display:-webkit-box;暫時只有這個的兼容性最好,flex是最好用,還可以如float一樣排多個元素時自動換行,只是兼容性還太差,(即使是第一種,在火狐下兼容性也不是很好)
對于第一種常見用法是:

    
  • 1
  • 2
  • 3
.box { display: -webkit-box; -webkit-box-align: center; // 設置里面的元素垂直居中 -webkit-box-pack: center; // 設置水平居中 } .box .box_flex1 { box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; display: block; width: 0; }

要想三個li元素平分box的寬度,width:0是關鍵(在這個坑里陷了好久,直到偶然的一次設置了width:0突然就好了,后來在天貓上也看到了同樣的設置width:0
彈性布局其他詳解可見此

使用 a 標簽的話,盡量讓 a 標簽 block ,盡量讓用戶可點擊區域最大化

對兩個div使用了transform之后,div下的z-index有時就會失效,我遇到過,但沒去認真探究,只是把z-index提高就好了,如果遇到這個問題的,詳細可以 看這

iOS中,當你點擊比如 input 準備輸入時,虛擬鍵盤彈出,整個視窗的 高度 就會變為 減去鍵盤 的高度,加入你在底部有fixed的元素比如btn,這個元素就會跑上來,一般都不會太美觀。我是當focus時就把它設為absolute,視情況而定,也有比如顯示一個新的層,將含有fixed按鈕的那一層隱藏的情況等等。

另外一種情況(一般在頁面內容很少時iphone5及以上常發生),當輸入框彈出時fixed元素擠到輸入框上,當輸入框消失時,fixed元素并沒有隨著輸入框的消失而回到底部,這是因為整個視窗的高度還保持在 減去鍵盤的 高度,需要手動去觸發讓視窗高度回到正常,然后試了很多方法都沒成功,后來的方案是輸入框消失時給頁面加隱形的很大的padding比如1000px并在30ms后改為正常,具體可看這移動端IOS關于fixed元素的問題

禁止用戶選中文字 -webkit-user-select:none

當把input設為 width:100%時,有時可能會遇到input的寬度超出了屏幕,這時可對input加一個屬性 box-sizing:border-box

關于box-sizing:border-box,此屬性是把邊框的寬度和padding包含在盒子的高寬中,假如你設置兩個元素float且各占50%,又都有border時,用這個屬性就可以完美地讓它們能顯示在同一行

做一個方向箭頭比如 “>” 時,可以用一個正方形的div,設置border:1px 1px 0 0;然后rotate(45deg),這樣就省去了一個圖片

CSS權重:style1000id100class10,普通如lidiv和偽類是1,通用如*0

使用rem時,設某個div比如的height:3rem;line-height:1.5rem;overflow:hidden;時,在某些android手機上可能會出現顯示不止兩行,第三行會顯示點頭部。 解決:利用js獲取文字line-height再去設置div高度

使用background時,background-position里使用了比如center left后不能再加具體的數值去定位,比如center 10px left(暫時兼容性差)

19.使用rem布局時,由于webkit支持的最小字體大小是12px,所以使用html使用62.5%實際是12px,這樣很難計算,我的做法是設置成625%100px,然后1rem就相當于100px

20.移動端字體使用 font-family: Helvetica,sans-serif;我看這也是天貓使用的

iphone原生鍵盤上用keyup統計字符數時,系統不會自動監控你選擇文字的事件,比如打了多個拼音,可能選擇的實際文字比輸入的字符數多或者少,但無法在用戶確定自己的輸入時監控到keyup(其他事件也一樣)判斷字符數。 改成input事件就可以了

22.實現毛玻璃效果,透過背景看其他元素模糊,自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(0,0,0,0.5);

這個效果暫時只有IOS9上的safari可以。
css3blur效果的話,是整層元素全部模糊,而透過模糊層看其他的元素不模糊

如果需要展示小于12px的文字,用transform:scale(%);它將元素縮小,但本身應該占的空間并不會變小,所以比如要元素居左對齊的話,還需設置translateX

在移動端對input框使用disabled屬性,會導致元素里面value值在頁面上被隱藏看不見,可以對元素使用css3效果pointer-event:none,意思就是此元素對鼠標事件無效

二.js部分

如果使用jquery綁定touch事件的話,獲取touchstarttouchmove的觸點坐標用 e.originalEvent.targetTouches[0].pageX

獲取touchend則用 e.originalEvent.changedTouches[0].pageX

利用style獲取獲取transformrotate

parseInt(/rotateX((.*?))/.exec(getALL.style.webkitTransform)[1])

如果頁面一開始沒有style值,rotate是寫在CSS里的,需要用到getComputedStyle,具體請看這里

有些版本的iphone4中, audiovideo默認播放事件不會觸發,比如使用window.onload或計時器等都不能觸發播放,必須用JS寫事件讓用戶手動點擊觸發才會開始播放,比如

$(document).one("touchstart",function(){
    audio.play();
})

想要在touchmove:function(e,參數一)加一個參數,結果直接使用e.preventDefault()就會 e 報錯,處理方法為

touchmove:function(e,參數一){
  var e=arguments[0]

  e.preventDefault()

}

移動端的一些小頁面可能沒必要用到zepto.js這些工具庫,就可以使用一些新一點的api,比如選取元素用querySelector(".class #id")querySelectorAll(".class element"),操作class可以用classList

點擊一個元素時,使用touchstart會立即觸發,而使用click則用有大概0.3s的延遲

想模擬一個立即觸發的點擊事件有兩種方法,fastclick.jszepto.js里的tap事件。
不過zeptotap事件有一個事件穿透的問題。假如你tap一個彈出層元素(這個元素遮罩了一個a標簽),這個元素立即消失,這樣由于上述的0.3s延遲tap事件就會傳遞給a標簽成click事件造成a標簽跳轉。
以上面的例子來說,解決方案視情況而定:
tap時讓遮罩漸隱消失,這個過程超過400ms就不會穿透到下一層去了
② 在touchend事件回調中加入preventDefault, 并在下一層中加上pointer-events:none。(這個沒用過)
③ 有的時候比如彈出一個iphone上滑動出來的層,點擊黑色半透明區域彈出層消失,這種可以在黑色區域綁定touchend也是和tap差不多的效果

當彈窗出現時,想禁止屏幕的滑動,給那個遮罩層添加touchmove事件即可,用e.preventDefault()會阻止的scrollclick等事件,消失時再off掉,

$(".body_cover").on("touchmove", function(e) {
    e.preventDefault();
});

使用input file上傳文件時,可以指定接受的類型,accept="image/png,image/jpeg,image/gif" ,同時在android上默認不能使用相機,可以加capture="camera"

同時,由于原生的樣式不好看,可以通過設置input的display:none,然后使用id.click()去觸發input元素的點擊。

9.給元素加:active偽類時,如果要求高,兼容性好的話,就得用js監控touchstart然后加相應的class

```
 $(document).on("touchstart", function(e) {
        var target = $(e.target);
        if (target.hasClass("is_hover")) {
            target.addClass("hover_css");
        }
    });
```
三、微信部分

判斷是否來自微信瀏覽器

function isFromWeiXin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    }
    return false;
}

判斷手機的類型

var user="";
        if (/android/i.test(navigator.userAgent)){
            //  android
            user="1";
        }
        if (/ipad|iphone|mac/i.test(navigator.userAgent)){
            //  ios
            user="0";
        }

3.如果在網頁里嵌套一個iframesrc為其他的網址等,當在微信瀏覽器打開時,如果iframe里的頁面過大,則iframesrc不能加載(具體多大不知道,只是遇到過)。

4.微信jssdk里預覽圖片接口,圖片的url不能填base64編碼,ios上會很卡,估摸著微信得卡個5秒左右才打得開,而android上壓跟就卡住或者一直卡在讀取圖片界面

5.微信當在輸入框里輸入消息時,會提示警示框不要輸入qq密碼等,這個可以在公眾平臺的功能設置的業務域名設置

6.微信里假如頁面一使用ajax獲取數據,當你進入下一頁面再按返回鍵返回頁面一的時候,有些情況不會去請求ajax數據,會使用緩存,然而ajax來的數據又并沒有存在緩存里。要設置cache:false(iphone、android的某些手機都可能出現)

7.在微信js config的時候,如果URL的參數有如?a={"param": "1"},會導致簽名失敗。給參數用encodeURIComponent編碼后再傳過去也是失敗!研究了好久。(后臺代碼沒做任何修改,只在我前端修改代碼)。所以最后還是使用了?param=1這樣的格式

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

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

相關文章

  • 移動布局與適配

    摘要:實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配,不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包 騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格,實際上是你將一個元素聲明為一個網格容器,并把元素內容置于網格中。 移動端頁面適配—...

    Clect 評論0 收藏0
  • 資源系列(4)-學習資源分享&面試資源匯總

    摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...

    princekin 評論0 收藏0
  • HTML-CSS

    摘要:但是,從字體上來說雪碧圖制作,使用以及相關,圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標準布局的情況下,回滾到舊版本的,保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭,但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 ...

    xiaokai 評論0 收藏0
  • HTML-CSS

    摘要:但是,從字體上來說雪碧圖制作,使用以及相關,圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標準布局的情況下,回滾到舊版本的,保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭,但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 ...

    CHENGKANG 評論0 收藏0
  • 性能優化常用總結

    摘要:前言對于前端的性能話題,從來都沒有斷絕過。作為一個前端開發者,性能是我們關注的指標。前端發展以來,優化方式,琳瑯滿目,有雅虎軍規等。所以,接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題,從來都沒有斷絕過。因為這個東西沒有最好,只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者,性能是我們關注的指標。它直接影響著我們...

    oliverhuang 評論0 收藏0
  • 性能優化常用總結

    摘要:前言對于前端的性能話題,從來都沒有斷絕過。作為一個前端開發者,性能是我們關注的指標。前端發展以來,優化方式,琳瑯滿目,有雅虎軍規等。所以,接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題,從來都沒有斷絕過。因為這個東西沒有最好,只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者,性能是我們關注的指標。它直接影響著我們...

    walterrwu 評論0 收藏0

發表評論

0條評論

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