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

来源:http://www.cnblogs.com/liusixin/archive/2017/02/18/6413677.html
-Advertisement-
Play Games

個人在移動端的一些總結歸納,有新的知識點會一直更新 一.css部分 1.meta標簽 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移動端加上這個標簽才是真正的自適應,不加的 ...


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

一.css部分

1.meta標簽

複製代碼
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移動端加上這個標簽才是真正的自適應,不加的話,假如你把一個980px寬度(手機端常規是980)的PC網頁
放在手機上顯示,倒也能正常顯示不出現滾動條,不過是移動設備對頁面 做了縮小優化,所以字體等都相應縮小了
(980px是相對於手機像素的,我的是超過1000px多一些就出現滾動條了,這個沒具體研究)。

關於  initial-scale=1 ,這個參照iphone5的尺寸320*568,如果你頁面按照640*1136做的話,scale就設為0.5                     
<meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari允許全屏瀏覽

<meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari頂端狀態條樣式

<meta content="telephone=no" name="format-detection">  忽略將數字變為電話號碼

<meta content="email=no" name="format-detection">   忽略識別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一樣排多個元素時自動換行,只是相容性還太差,(即使是第一種,在火狐下相容性也不是很好)
對於第一種常見用法是:

複製代碼
<ul class="box">
        <li class="box_flex">1</li>
        <li class="box_flex">2</li>
        <li class="box_flex">3</li>
    </ul>
    .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
彈性佈局其他詳解可見此

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

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

12. 在iOS中,當你點擊比如 input 準備輸入時,虛擬鍵盤彈出,整個視窗的 高度 就會變為 減去鍵盤 的高度,加入你在底部有fixed的元素比如btn,這個元素就會跑上來,一般都不會太美觀。我是當focus時就把它設為absolute,視情況而定,也有比如顯示一個新的層,將含有fixed按鈕的那一層隱藏的情況等等。
另外一種情況(一般在頁面內容很少時iphone5及以上常發生),當輸入框彈出時fixed元素擠到輸入框上,當輸入框消失時,fixed元素並沒有隨著輸入框的消失而回到底部,這是因為整個視窗的高度還保持在 減去鍵盤的 高度,需要手動去觸發讓視窗高度回到正常,然後試了很多方法都沒成功,後來的方案是輸入框消失時給頁面加隱形的很大的padding比如1000px併在30ms後改為正常,具體可看這移動端IOS關於fixed元素的問題

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

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

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

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

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

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

18. 使用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;我看這也是天貓使用的

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

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

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

 

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

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

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

二.js部分

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

  2. 利用style獲取獲取transformrotate

    parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])
    
    如果頁面一開始沒有`style`值,`rotate`是寫在`CSS`里的,需要用到`getComputedStyle`,具體請看[這裡][5]

     

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

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

     

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

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

     

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

  6. 點擊一個元素時,使用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差不多的效果

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

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

     

  2. 使用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");
        }
    });
複製代碼

 

三、微信部分

  1. 判斷是否來自微信瀏覽器

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

     

  2. 判斷手機的類型

    複製代碼
    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這樣的格式

 

轉自:https://segmentfault.com/a/1190000003908191


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 涉及知識點:web標準、 web語義化、 瀏覽器內核、 相容性、 語義化、html5新特性... ...
  • 相關知識點:佈局、 浮動、 盒子模型、 彈性和模型、 選擇器優先順序、 居中定位、 相容性、 hack寫法...... ...
  • var ca = document.getElementById("ca"); var ctx = ca.getContext('2d'); //生成n~m之間的隨機數的函數 function random(n,m){ return Math.floor(Math.random() * (m - n... ...
  • 新手Perfect教程之JavaScript教程—①你好,世界! ...
  • CSS命名規範(規則)常用的CSS命名規則 頭:header 內容:content/container 尾:footer 導航:nav 側欄:sidebar 欄目:column 頁面外圍控制整體佈局寬度:wrapper 左右中:left right center 登錄條:loginbar 標誌:lo ...
  • html代碼: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>輪播圖練習</title> <link rel="stylesheet" href="css/css.css" type="text/css"/ ...
  • 動態顯示目錄的作用 不用每次寫博客的時候繁瑣的人工整理目錄,又可以動態浮動在右下角,方便快速跳到感興趣的位置同時也可以快速的對文章內容有一個大概的瞭解。 實現原理 首先根據個人喜好,我習慣了用 h1 來做分類。所以本篇內容也主要是針對h1來提取目錄。 如何提取出來h1呢? 先來看這張圖,以獵豹瀏覽器 ...
  • 一、為什麼使用RequireJS? <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> <script src="b.js"></script> <script src="c.j ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...