移動端

lowett 發布于2019-08-20 18:21 / 1426人閱讀

摘要：純，隱藏滾動條，保留鼠標滾動效果。中彈性拉伸的現象解決禁用那個層或者的事件的默認行為禁用音視頻自動播放這個是蘋果官方明確提出的，為了用戶的利益。所以的瀏覽器依然是死角，不能做到自動播放。

只是一個文檔總結，純粹是喜歡SF的Markdown。

HTML

CSS

X軸上采用百分比

字體大小以及部分不能用百分比衡量者，采用REM單位

配置頁面根font-size大小

(function ( doc, win ) {
    var win = window;
    var doc = win.document;
    var baseWidth = 640;
    var documentHTML = doc.documentElement;
    function setRootFont(){
    var docWidth = documentHTML.getBoundingClientRect().width;
    var scale = docWidth / baseWidth;
    if (docWidth > 640) {
    scale = 1;
    }
    var p = scale*100;
    documentHTML.style.fontSize = p + "px";
    }
    setRootFont();
    win.addEventListener("resize", setRootFont, false);
})( document, window );

表單

表單之 - 各個瀏覽器自帶的樣式

這個問題不僅是手機端還有PC端，張鑫旭大神有詳解

表單之 - 輸入框的光標大小

解決：注意排查line-height值，不要使用line-height垂直居中，用上下同padding值

表單之 - 去掉input和select的默認樣式

/* input和select的默認樣式取消 */
input,select{
    outline: transparent dotted;border: 0;background: #fff;
    -webkit-appearance : none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

/* input的placeholder修改，至于select下的option的字體顏色可以直接控制select的color屬性 */
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc;font-size: 13px;
}
input:-moz-placeholder,textarea:-moz-placeholder {
    color: #ccc;font-size: 13px;
}
input::-moz-placeholder,textarea::-moz-placeholder {
    color: #ccc;font-size: 13px;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #ccc;font-size: 13px;
}

表單之 - 重寫按鈕的樣式

CODEPEN

表單之 - iOS機型點擊輸入框頁面會放大

width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放

滾動條

修改樣式

&::-webkit-scrollbar {
  width: 4px
}
&::-webkit-scrollbar-track {
  border-radius: 4px
}
&::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1);
  border-radius: 6px
}

隱藏滾動條但是依然可以滾動

&::-webkit-scrollbar {
  display:none
}

但是上述僅用于 webkit 瀏覽器，其他瀏覽器見過一種思路是：在原有的 div外部套一層div，樣式內寫overflow：hidden; 使這個外部的div寬度小于內部出滾動條的div.內部div的樣式為overflow-y:auto;overflow-x:hidden;。這樣，內部div的滾動條就被隱藏起來了，但是，此時依然可以滾動。純css，div隱藏滾動條，保留鼠標滾動效果。

iOS

iOS中彈性拉伸的現象

解決：禁用那個層或者body的touchstart事件的默認行為

// disabled touchstart event
document.addEventListener("touchstart",function(event){
    event.preventDefault();
}, false);

iOS禁用音視頻自動播放

這個是蘋果官方明確提出的，為了用戶的利益。此處的iOS涵蓋了（iPhone和iPad）

解決：這個其實不能根本上解決問題，只能借用微信環境下，微信的 js-sdk 來實現自動播放。所以iOS的Safari瀏覽器依然是死角，不能做到自動播放。

  wx.ready(() => {
    document.getElementById("audio").play();
  })

追加：遇見 touchstart 和 touchend 事件，在 touchstart 時觸發音頻 a，在 touchend 時觸發音頻 b，但是如果長按時間過長，會出現 b 不播放或者播放延遲的現象。原因是，音頻資源沒加載完成。

  // 預設 this 環境
  function preload() {
    wx.ready(() => {
      wx.getNetworkType({
        success: () => {
          this.a = new Audio("a.mp3");
          this.b = new Audio("b.mp3");
          this.a.loop = true;
          this.a.load();
          this.b.load();
        }
      });
    });
  }
  
  // touchstart and touchend
  function start() {
    this.a.play();
  }
  function end() {
    this.a.pause();
    this.b.play();
  }

iOS中DOM的onclick事件無效

解決：在該DOM上css上添加{cursor: pointer}

個例

Chrome瀏覽器默認最小字體是12px

解決：使用適配手機的縮放。（ transform: scale(...) translate(...) ）

CODEPEN DEMO

Safari無痕模式下不支持sessionStorage.setItem()

解決一：業務場景可使用全局變量處理

解決二：Safari Private browsing mode appears to support localStorage, but doesn"t

學習資料

使用Flexible實現手淘H5頁面的終端適配

前端頁面布局常見問題/已踩過的坑大雜燴

——好記性不如爛筆頭

云服務器 GPU云服務器移動端海外移動端移動端推送移動端框架

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

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

移動端布局與適配

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

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

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

CoreDump 2019-08-23 13:46 評論0 收藏0
移動端用戶體驗（UE）優化歷程

摘要：需求由于某企業對該產品的使用逐漸增加的手機端，而瀏覽較少，而該系統針對多是端，移動端可以說毫無用戶體驗，現對移動端進行逐步優化移動端用戶體驗。將原組件形成的樹形多選控件，轉換為移動端。前言項目是用sap的BI智能決策分析系統，java運用spring+springMVC+hibernate，數據庫運用了sap企業的HANA內存數據庫。前端技術采用bootstrap+datetime...

Bowman_han 2019-08-02 16:04 評論0 收藏0
移動端用戶體驗（UE）優化歷程

摘要：需求由于某企業對該產品的使用逐漸增加的手機端，而瀏覽較少，而該系統針對多是端，移動端可以說毫無用戶體驗，現對移動端進行逐步優化移動端用戶體驗。將原組件形成的樹形多選控件，轉換為移動端。前言項目是用sap的BI智能決策分析系統，java運用spring+springMVC+hibernate，數據庫運用了sap企業的HANA內存數據庫。前端技術采用bootstrap+datetime...

0xE7A38A 2019-08-29 16:39 評論0 收藏0
移動端用戶體驗（UE）優化歷程

摘要：需求由于某企業對該產品的使用逐漸增加的手機端，而瀏覽較少，而該系統針對多是端，移動端可以說毫無用戶體驗，現對移動端進行逐步優化移動端用戶體驗。將原組件形成的樹形多選控件，轉換為移動端。前言項目是用sap的BI智能決策分析系統，java運用spring+springMVC+hibernate，數據庫運用了sap企業的HANA內存數據庫。前端技術采用bootstrap+datetime...

Brenner 2019-08-23 11:45 評論0 收藏0
移動端自適應布局方案

摘要：背景現在工作中有超過一半的時間用于移動端項目的開發，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。背景現在工作中有超過一半的時間用于移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式布...

zacklee 2019-08-26 11:50 評論0 收藏0