對移動端相容適配的分析

来源:https://www.cnblogs.com/paul123/archive/2019/06/23/11073465.html
-Advertisement-
Play Games

一、思考 在移動端越來越重要的背景下，每位web開發者對移動適配都有自己的想法。是移動優先，還是PC優先，還是兩者兼得？在實際開發中這個問題是和項目產品定位有關的，也涉及到UI的設計，不是開發者能決定。但不管產品如何定位，作為開發者總是要提供最優的解決方案，是用一套樣式還是多套樣式？網上一搜，有靜態 ...


一、思考
在移動端越來越重要的背景下，每位web開發者對移動適配都有自己的想法。是移動優先，還是PC優先，還是兩者兼得？在實際開發中這個問題是和項目產品定位有關的，也涉及到UI的設計，不是開發者能決定。但不管產品如何定位，作為開發者總是要提供最優的解決方案，是用一套樣式還是多套樣式？網上一搜，有靜態佈局、流式佈局，響應式佈局，自適應佈局，彈性佈局等一堆，雲里霧裡，到底要怎麼選呢？看完這篇文章相信心中就有數了。

二、viewport的使用
1、最常見的設置，大多數的框架（如bootstrap）和知名的站點基本是這個配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

2、這個配置重點在width=device-width，就是讓視視窗等於設配寬度，也就是我們開發中能用document的寬度，其它幾個“初始縮放大小”“最大縮放大小”“最小縮放大小”和“是否允許用戶縮放”可以理解為用來“固定”這個設置不被破壞的。
3、這個設置很簡單，但同時也會帶來一些需要解決的問題。
a、現在的手機都是兩倍三倍的Retina高清屏，1px實際的效果是不止一個像素的，對不同的設備設置不同
的initial-scale可以有比較好的效果，比如在2倍Retina的iphone6(6s,7,8)中設置為0.5。一旦
動態設置這個，也就意味這視視窗不同了，需要不同樣式適配。這也是分配樣式的一套基準，如何分配樣式
後面會有更詳細的講解。
b、在PC端如果有最小寬度的限制，同樣需要配置不同的width值。

三、單位的使用
1、css中單位很多，這裡只介紹最常用的幾種：
(1) px:這個可以理解為“基準”單位，就是不管在什麼設備中其值是不會變的，就像cm,kg這些一樣
(2) em:這個是相對父容器的單位，一般用在字體font-size中比較好。如父容器font-size為16px,則
1em=16px
(3) rem:相對於根元素html的單位，如html的font-size為16px,則1rem=16px
(4) vw/vh: 視口寬高為100vw/100vh,這個和百分比類似，只是百分比是相對於父容器，其相對於視口
2、移動適配最常用的應該是rem,很多框架和淘寶的flexible適配都是基於這個單位，而自己做的話，一般
在首頁載入時全局js設置html的font-size即可，代碼如下：

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      //這裡根據設計稿為750，設置1rem=100px,
      docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
    };

  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

3.如果用了sass/less等預編譯語言可以更靈活的配置的，在上面方法內配置（設計稿為750的情況下）：
docEl.style.fontSize = 40 * (clientWidth / 750) + 'px';
在編譯函數中配置：
@function px2rem($px, $base-font-size: 20px) {
@return ($px / $base-font-size) * 1rem;
}
這樣我們就可以直接使用設計稿的尺寸，如：px2rem(100px)，省去了自己計算，如果沒用預編譯語言（推
薦使用），編輯器也有插件支持單位轉化。
4.上面是基於屏幕寬度來設置根元素font-size,如果設置不同的initial-scale，我們需要基於設備像素比設置，通過window.devicePixelRatio獲取。

四、頁面佈局方式
1.理解html的文檔流方式，其實就是流式佈局，即橫向需要我們設置，縱向自動疊加。這個和移動端的設計體驗方式是比較像的。在寬度中就要用自適應的方式，如百分比，有設置相對單位的，可用相對單位，靈活使用，css3的display:flex也是很好的選擇，現代瀏覽器和移動設備基本都支持了。
2.剛纔說到體驗，很明顯移動端和pc端的體驗真的很不同，所以光有上面的自適應是遠遠不夠，是不是需要對這兩個完全不同的體驗方式響應不同的佈局和樣式。

五、媒體查詢
1.我們除了可以用js來判斷不同的設備，設置相對單位所用的根元素。另一個強大的方式是可以通過css3強大的媒體查詢來指定不同的樣式。
2.媒體查詢的規則

@media all and ([min-width|max-width|orientation|min-device-width|...]) { ... }

中括弧[]中表示需要添加的條件,可匹配寬高/橫豎屏/設備類型等，比如min-width:750px,表示最小寬度為750px,{}是在匹配模式下的樣式。也有邏輯判斷and/or/not連接不同的規則

3.要是引入整個文件，可以在link標簽中使用

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

表示：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

4.Bootstrap響應式設計這類柵格佈局採用的就是這套方式。

六、1px像素邊框問題
1.除了上面說到在viewport中設置縮放外，直接設置一個空元素縮放也是可以的

p{
    width: 100px;
    height: 1px;
    background: red;
    display: block;
    transform: scaleY(.5);
}

不足：圓角無法實現，實現4條邊框比較麻煩，並且只能單獨實現，如果嵌套，會對包含的效果產生不想要的效果，所以此方案配合:after和before獨立使用較多

2.利用CSS對陰影處理的方式實現0.5px的效果

box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

不足：顏色不好處理， 黑色 rgba(0,0,0,1) 最深的情況了。有陰影出現，不好用大量使用box-shadow可能會導致性能瓶頸。四條邊框實現效果不理想。
3.圖片實現，使用 background-image 實現1px有兩種方式: 漸變 linear-gradient 或直接使用圖片(base64)。漸變 linear-gradient (50%有顏色，50%透明)

div{
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

不足：大量使用漸變可能導致性能瓶頸，代碼量大，多背景圖片有相容性問題

七、圖片高清化
1.可以使用srcset屬性設置，使用看https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
2.背景圖高清
a.使用上面介紹的媒體查詢，如：

/* 普通顯示屏(設備像素比例小於等於1)使用1倍的圖 */
  .css{
      background-image: url(img_1x.png);
  }

  /* 高清顯示屏(設備像素比例大於等於2)使用2倍圖  */
  @media only screen and (-webkit-min-device-pixel-ratio:2){
      .css{
    background-image: url(img_2x.png);
      }
  }

  /* 高清顯示屏(設備像素比例大於等於3)使用3倍圖  */
  @media only screen and (-webkit-min-device-pixel-ratio:3){
      .css{
    background-image: url(img_3x.png);
      }
  }

b.image-set 實現高清化

.css {
      background-image: url(1x.png);    /*不支持image-set的情況下顯示*/
      background: -webkit-image-set(
        url(1x.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */
        url(2x.png) 2x,/* 支持image-set的瀏覽器的[2倍Retina屏幕] */
        url(3x.png) 3x/* 支持image-set的瀏覽器的[3倍Retina屏幕] */
      );
  }

c.很多網頁端對圖片的要求還是沒那麼高的，不像app那樣，圖片一般用一張2倍高清圖就行，最新的設備對以上屬性的支持還是可以的，對於要求高的應用使用

八、移動端click屏幕產生300ms的延時響應
1.原因：在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區域進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間里用戶未進行下一次點擊，則瀏覽器會做單擊跳轉鏈接的處理，如果t時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回調函數處理，需要300ms後才生效，也就間接導致影響其他業務邏輯的處理。
2.解決方案：
（1）使用fastclick.js,只要全局加入該文件並設置如下：

FastClick.attach(document.body);

(2) zepto的touch模塊，tap事件也是為瞭解決在click的延遲問題

九、更改預設樣式

//使用appearance改變webkit瀏覽器的預設外觀
input,select { -webkit-appearance:none; appearance: none; }

//winphone下，使用偽元素改變表單元素預設外觀
//1.禁用select預設箭頭，::-ms-expand修改表單控制項下拉箭頭，設置隱藏並使用背景圖片來修飾
select::-ms-expand { display:none; }

//2.禁用radio和checkbox預設樣式，::-ms-check修改表單覆選框或單選框預設圖標，設置隱藏並使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表單輸入框預設清除按鈕，::-ms-clear修改清除按鈕，設置隱藏並使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
// 禁止長按鏈接與圖片彈出菜單
a,img { -webkit-touch-callout: none }    

// 禁止ios和android用戶選中文字
html,body {-webkit-user-select:none; user-select: none; }

// 改變輸入框placeholder的顏色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

// android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}

十、總結
1.網站適配的終端可以用js或媒體查詢的方式獲取，分配對應的樣式。
2.佈局上採用相對單位,百分比和flex的彈性方式。
3.對移動端的特殊性進行適配，如1px問題，預設樣式等。


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

-Advertisement-
Play Games
更多相關文章
  • <html>標簽--基礎標簽
    [2019.06.23 學習筆記2] 1.定義HTML文檔 ...
  • XHTML
    [2019.06.23 學習筆記1] 1.XHTML是html向XML的一個過渡語言，XML嚴謹，HTML寬鬆； ...
  • ES6- Class類的使用，聲明，繼承
    聲明一個類 調用方法 // 調用方法 let ananClass = new Coder; ananClass.name('類'); ananClass.skill('技能'); 類傳參 // 類傳參 let ananiah = new Coder(1,2); console.log(ananiah ...
  • ES6-promise對象的使用
    Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。 所謂Promise，簡單說就是一個容器，裡面保存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語... ...
  • JQuery框架：介紹、安裝、選擇器、屬性操作、動畫
    jQuery [TOC] 詳細內容 1.JQuery介紹 jQuery是一個快速，小巧，功能豐富的JavaScript庫。它通過易於使用的API在大量瀏覽器中運行，使得HTML文檔遍歷和操作，事件處理，動畫和Ajax變得更加簡單。通過多功能性和可擴展性的結合，jQuery改變了數百萬人編寫JavaS ...
  • Vue.js+cube-ui（Scroll組件）實現類似頭條效果的橫向滾動導航條
    本博主在一次個人移動端項目中，遇到這麼一個需求：希望自己的項目中，頭部導航條的效果可以像今日頭條那樣，橫向滾動! 對於這樣的效果，在各大移動端項目中幾乎是隨處可見，為什麼呢？ 我們都知道，對於移動端也就是手機上，我們頁面的寬度並不像PC端那樣大，可以顯示很長的導航項，但對於我們移動端來說，由於功能的 ...
  • 作用域,作用域鏈,垃圾收集,js解析
    變數中包含基本數據類型和引用數據類型,基本類型指簡單的數據值,引用類型由多個值構成的對象. 引用類型可以為其添加屬性和方法,也可以改變和刪除屬性和方法. 複製變數值: 基本類型:一個變數向另一個變數複製基本類型的值,會在變數對象上創建一個新值,並把該值分配到新變數分配的位置上,兩者任何操作不會互相影 ...
  • ES6-Proxy，代理
    proxy 代理 Es6 增強 對象和函數（方法） Proxy用於修改某些操作的預設行為，即對編程語言層面進行修改，屬於“元編程”， Proxy意思為“代理”，即在訪問對象之前建立一道“攔截”，任何訪問該對象的操作之 前都會通過這道“攔截”，即執行Proxy裡面定義的方法。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類