移動端高清、多屏適配方案

来源:https://www.cnblogs.com/wwhhq/archive/2017/12/30/8150507.html
-Advertisement-
Play Games

背景 開發移動端H5頁面 面對不同解析度的手機 面對不同屏幕尺寸的手機 視覺稿 在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。 對於移動端開發而言，為了做到頁面高清的效果，視覺稿的規範往往會遵循以下兩點： 1、首先，選取一款手機的屏幕寬高作為基準(以前是iphone4的320×480 ...


背景

  • 開發移動端H5頁面
  • 面對不同解析度的手機
  • 面對不同屏幕尺寸的手機

視覺稿

在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。

對於移動端開發而言，為了做到頁面高清的效果，視覺稿的規範往往會遵循以下兩點：

1、首先，選取一款手機的屏幕寬高作為基準(以前是iphone4的320×480，現在更多的是iphone6的375×667)。
2、對於retina屏幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。
問題：

1、對於dpr=2的手機，為什麼畫布大小×2，就可以解決高清問題？
2、對於2倍大小的視覺稿，在具體的css編碼中如何還原每一個區塊的真實寬高(也就是佈局問題)?
帶著問題，往下看…

一些概念

在進行具體的分析之前，首先得知道下麵這些關鍵性基本概念(術語)。

物理像素(physical pixel)

一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。

設備獨立像素(density-independent pixel)

設備獨立像素(也叫密度無關像素)，可以認為是電腦坐標系統中得一個點，這個點代表一個可以由程式使用的虛擬像素(比如: css像素)，然後由相關係統轉換為物理像素。

所以說，物理像素和設備獨立像素之間存在著一定的對應關係，這就是接下來要說的設備像素比。

設備像素比(device pixel ratio )

設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關係，它的值可以按如下的公式的得到：

設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通過window.devicePixelRatio獲取到當前設備的dpr。

在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配(這裡只針對webkit內核的瀏覽器和webview)。

綜合上面幾個概念，一起舉例說明下：

以iphone6為例：

1、設備寬高為375×667，可以理解為設備獨立像素(或css像素)。
2、dpr為2，根據上面的計算公式，其物理像素就應該×2，為750×1334。

用一張圖來表現，就是這樣(原諒我的盜圖)：
這裡寫圖片描述

上圖中可以看出，對於這樣的css樣式：

width: 2px;
height: 2px;

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數是不一致的。

在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。
在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。

點陣圖像素
一個點陣圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每一個點陣圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。

談到這裡，就得說一下，retina下圖片的展示情況？

理論上，1個點陣圖像素對應於1個物理像素，圖片才能得到完美清晰的展示。

在普通屏幕下是沒有問題的，但是在retina屏幕下就會出現點陣圖像素點不夠，從而導致圖片模糊的情況。

用一張圖來表示：
這裡寫圖片描述

如上圖：對於dpr=2的retina屏幕而言，1個點陣圖像素對應於4個物理像素，由於單個點陣圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(註意上述的幾個顏色值)。

所以，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。

如：200×300(css pixel)img標簽，就需要提供400×600的圖片。

如此一來，點陣圖像素點個數就是原來的4倍，在retina屏幕下，點陣圖像素點個數就可以跟物理像素點個數形成 1 : 1的比例，圖片自然就清晰了(這也解釋了之前留下的一個問題，為啥視覺稿的畫布大小要×2？)。

這裡就還有另一個問題，如果普通屏幕下，也用了兩倍圖片，會怎樣呢？

很明顯，在普通屏幕下，200×300(css pixel)img標簽，所對應的物理像素個數就是200×300個，而兩倍圖片的點陣圖像素個數則是200×300*4，所以就出現一個物理像素點對應4個點陣圖像素點，所以它的取色也只能通過一定的演算法(顯示結果就是一張只有原圖像素總數四分之一，我們稱這個過程叫做downsampling)，肉眼看上去雖然圖片不會模糊，但是會覺得圖片缺少一些銳利度，或者是有點色差(但還是可以接受的)。

用一張圖片來表示：
這裡寫圖片描述

針對上面的兩個問題，我做了一個demo(內網訪問)狂戳這裡。
這裡寫圖片描述

demo中，100×100的圖片，分別放在100×100，50×50，25×25的img容器中，在retina屏幕下的顯示效果。

條形圖，通過放大鏡其實可以看出邊界像素點取值的不同：


  • 圖1，就近取色，色值介於紅白之間，偏淡，圖片看上去會模糊(可以理解為圖片拉伸)。

  • 圖2，沒有就近取色，色值要麼是紅，要麼是白，圖片看上去很清晰。

  • 圖3，就近取色，色值介於紅白之間，偏重，圖片看上去有色差，缺少銳利度(可以理解為圖片擠壓)。


愛字圖，可以通過看文字”愛”來區分圖片模糊還是清晰。

(ps：如果看上去不明顯，可以用手機掃碼網頁(內網地址)或者點擊原圖看會更直觀點。

幾個問題

這裡說一下，移動端H5開發，在不同解析度，不同屏幕手機下會遇到的幾個經典問題。

retina下，圖片高清問題

這個問題上面已經介紹過解決方案了：兩倍圖片(@2x)，然後圖片容器縮小50%。

如：圖片大小，400×600;

1.img標簽

width: 200px;
height: 300px;

2.背景圖片

width: 200px;
height: 300px;
background-image: url([email protected]);
background-size: 200px 300px; // 或者: background-size: contain;

這樣的缺點，很明顯，普通屏幕下：

1、同樣下載了@2x的圖片，造成資源浪費。
2、圖片由於downsampling，會失去了一些銳利度(或是色差)。
所以最好的解決辦法是：不同的dpr下，載入不同的尺寸的圖片。

不管是通過css媒體查詢，還是通過javascript條件判斷都是可以的。

那麼問題來了，這樣的話，不就是要準備兩套圖片了嘛？(@1x 和@2x)

我想，做的好的公司，都會有這麼一個圖片伺服器，通過url獲取參數，然後可以控製圖片質量，也可以將圖片裁剪成不同的尺寸。

所以我們只需上傳大圖(@2x)，其餘小圖都交給圖片伺服器處理，我們只要負責拼接url即可。

如，這樣一張原圖：

https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原圖

可以類似這樣，進行圖片裁剪：

// 200×200
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg

// 100×100
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg

(ps: 當然裁剪只是對原圖的等比裁剪，得保證圖片的清晰嘛~)

retina下，border: 1px問題

這大概是設計師最敏感，最關心的問題了。

首先得說一下，為什麼存在retina下，border: 1px這一說？

我們正常的寫css，像這樣border: 1px;，在retina屏幕下，會有什麼問題嗎？

先來，來看看下麵的圖：

這裡寫圖片描述

上面兩張圖分別是在iphone3gs(dpr=1)和iphone5(dpr=2)下麵的測試效果，對比來看，對於1px的border的展示，它們是一致的，並無區別。

那麼retina顯示屏的優勢在哪裡，設計師為何覺得高清屏下(右圖)這個線條粗呢？明明和左右一樣的~

還是通過一張圖來解釋(原諒我再次盜圖)：
這裡寫圖片描述

上圖中，對於一條1px寬的直線，它們在屏幕上的物理尺寸(灰色區域)的確是相同的，不同的其實是屏幕上最小的物理顯示單元，即物理像素，所以對於一條直線，iphone5它能顯示的最小寬度其實是圖中的紅線圈出來的灰色區域，用css來表示，理論上說是0.5px。

所以，設計師想要的retina下border: 1px;，其實就是1物理像素寬，對於css而言，可以認為是border: 0.5px;，這是retina下(dpr=2)下能顯示的最小單位。

然而，無奈並不是所有手機瀏覽器都能識別border: 0.5px;，ios7以下，android等其他系統里，0.5px會被當成為0px處理，那麼如何實現這0.5px呢？

最簡單的一個做法就是這樣(元素scale)：

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

我們照常寫border-bottom: 1px solid #ddd;，然後通過transform: scaleY(.5)縮小0.5倍來達到0.5px的效果，但是這樣hack實在是不夠通用(如：圓角等)，寫起來也麻煩。

當然還有其他好多hack方法，網上都可以搜索到，但是各有利弊，這裡比較推薦的還是頁面scale的方案，是比較通用的，幾乎滿足所有場景。

對於iphone5(dpr=2)，添加如下的meta標簽，設置viewport(scale 0.5)：

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">

這樣，頁面中的所有的border: 1px都將縮小0.5，從而達到border: 0.5px;的效果。

有人擔心頁面scale後會影響性能，@妙凈同學做過性能測試，見這裡(內網地址)。

看一下實現後的效果圖對比(右圖為優化過的)：
這裡寫圖片描述

(ps: 圖片被壓縮過，可能看上去並不明顯，可以用手機掃碼或者點擊這裡(內網地址)對比看看)

這裡寫圖片描述

然而，頁面scale，必然會帶來一些問題：

1、字體大小會被縮放
2、頁面佈局會被縮放(如: div的寬高等)
這兩個問題後面講到…

多屏適配佈局問題

移動端佈局，為了適配各種大屏手機，目前最好用的方案莫過於使用相對單位rem。

基於rem的原理，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。

這裡我們提取了一個公式(rem表示基準值)

rem = document.documentElement.clientWidth * dpr / 10

說明：

1、乘以dpr，是因為頁面有可能為了實現1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1),。
2、除以10，是為了取整，方便計算(理論上可以是任何值)
所以就像下麵這樣，html的font-size可能會：

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2 / 10 = 64px

iphone6: 375px * 2 / 10 = 75px

對於動態改變根節點html的font-size，我們可以通過css做，也可以通過javascript做。

css方式，可以通過設備寬度來媒體查詢來改變html的font-size：

html{font-size: 32px;}
//iphone 6 
@media (min-device-width : 375px) {
   html{font-size: 64px;}
}
// iphone6 plus 
@media (min-device-width : 414px) {
    html{font-size: 75px;}
}
*/

缺點：通過設備寬度範圍區間這樣的媒體查詢來動態改變rem基準值，其實不夠精確，比如：寬度為360px 和 寬度為320px的手機，因為屏寬在同一範圍區間內(<375px)，所以會被同等對待(rem基準值相同)，而事實上他們的屏幕寬度並不相等，它們的佈局也應該有所不同。最終，結論就是：這樣的做法，沒有做到足夠的精確，但是夠用。

javascript方式，通過上面的公式，計算出基準值rem，然後寫入樣式，大概如下(代碼參考自kimi的m-base模塊)

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;


// 設置viewport，進行縮放，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 設置data-dpr屬性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

這種方式，可以精確地算出不同屏幕所應有的rem基準值，缺點就是要載入這麼一段js代碼，但個人覺得是這是目前最好的方案了。

因為這個方案同時解決了三個問題：

1、border: 1px問題
2、圖片高清問題
3、屏幕適配佈局問題
說到佈局，自然就得回答一下最初的留下的那個問題：如何在css編碼中還原視覺稿的真實寬高？

前提條件：

1、拿到的是一個針對iphone6的高清視覺稿 750×1334
2、採用上述的高清方案(js代碼)。
如果有一個區塊，在psd文件中量出：寬高750×300px的div，那麼如何轉換成rem單位呢？

公式如下：

rem = px / 基準值;

對於一個iphone6的視覺稿，它的基準值就是75(之前有提到);

所以，在確定了視覺稿(即確定了基準值)後，通常我們會用less寫一個mixin，像這樣：

// 例如: .px2rem(height, 80);
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

所以，對於寬高750×300px的div，我們用less就這樣寫：

.px2rem(width, 750);
.px2rem(height, 300);

轉換成html，就是這樣：

width: 10rem; // -> 750px
height: 4rem; // -> 300px

最後因為dpr為2，頁面scale了0.5，所以在手機屏幕上顯示的真實寬高應該是375×150px，就剛剛好。

倘若頁面並沒有scale 0.5，我們的代碼就得這樣：

.px2rem(width, 375);
.px2rem(height, 150);

這樣的寬高，我們往往是這樣得來的：

1、將750×1334的視覺稿轉成375×667的大小後，再去量這個區塊的大小(感覺好傻)。
2、在750×1334量得區塊寬高是750×300px後，再口算除以2(感覺好麻煩)。

最後給出一張沒有佈局適配(上圖)和用rem佈局適配(下圖)的對比圖：

這裡寫圖片描述
(上面的手機分別是：iphone3gs, iphone5, iphone6)

很明顯可以看出，rem適配的各個區塊的寬高都會隨著手機屏寬而改變，最最明顯的可以看一下圖片列表那部分，最後一張圖視覺稿要求只出現一點點，rem佈局在任何屏幕下都顯示的很好。

字體大小問題

既然上面的方案會使得頁面縮放(scale)，對於頁面區塊的寬高，我們可以依賴高清視覺稿，因為視覺稿本來就×2了，我們直接量就可以了，那麼對於字體該如何處理呢？

對於字體縮放問題，設計師原本的要求是這樣的：任何手機屏幕上字體大小都要統一，所以我們針對不同的解析度(dpr不同)，會做如下處理：

font-size: 16px;
[data-dpr="2"] input {
  font-size: 32px;
}

(註意，字體不可以用rem，誤差太大了，且不能滿足任何屏幕下字體大小相同)

為了方便，我們也會用less寫一個mixin：

.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
    [data-dpr="2"] & {
        @{name}: @px * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        @{name}: round(@px * 2.5 / 2) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        @{name}: round(@px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        @{name}: round(@px / 2 * 3) * 1px
    }
    // for 三星note4
    [data-dpr="4"] & {
        @{name}: @px * 2px;
    }
}

(註意：html的data-dpr屬性就是之前js方案裡面有提到的，這裡就有用處了)

根據經驗和測試，還是會出現這些奇奇葩葩的dpr，這裡做了統一相容~

用的時候，就像這樣：

.px2px(font-size, 32);

當然對於其他css屬性，如果也要求不同dpr下都保持一致的話，也可以這樣操作，如：

.px2px(padding, 20);
.px2px(right, 8);

參考文章

http://www.smashingmagazine.com/2012/08/20/towards-retina-web/
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
http://www.inserthtml.com/2012/09/designing-retina-devices/
http://iconmoon.com/blog2/iphone-6-plus-screen-size/
http://dieulot.net/css-retina-hairline

最後

如果不對的地方，歡迎留言指正，新浪微博 – Lovesueee。

原文地址：http://www.aliued.com/?p=3166

更多文章


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

-Advertisement-
Play Games
更多相關文章
  • 在ubtunu使用apt-get安裝和配置freeradius
    安裝freeradius之前先要確保已經安裝了mysql、因為後來要用到、沒有安裝使用apt-get來安裝 然後就是安裝freeradius的部件 安裝完成後freeradius就會自動啟動了、由於莪們要使用調試模式來啟動freeradius、所以先關閉freeradius服務先 註意： 使用ubt ...
  • RecyclerView分隔線定製
    分割線我們利用RecyclerView的addItemDecoration(ItemDecoration fromHtml) 新建一個類來看看到底是什麼： 有兩個方法getItemOffsets()這裡我一般指定偏移量就可以了，就是分割線占多少高度，或者說是畫在什麼位置，你總的給我留出位置來；onD ...
  • Android Log類基本用法
    Log類介紹： API for sending log output.Generally, use the __Log.v() Log.d() Log.i() Log.w() and Log.e()__ methods. The order in terms of verbosity, from l ...
  • android 串口開發第二篇:利用jni實現android和串口通信
    一：串口通信簡介 由於串口開發涉及到jni，所以開發環境需要支持ndk開發，如果未配置ndk配置的朋友，或者對jni不熟悉的朋友,請查看上一篇文章，android 串口開發第一篇:搭建ndk開發環境以及第一個jni調用程式 ,串口通信和java操作io類似，先打開串口，然後向串口發送或者讀取數據，最 ...
  • WEB前端學習有用的書籍
    WEB前端研發工程師，在國內算是一個朝陽職業，這個領域沒有學校的正規教育，大多數人都是靠自己自學成才。本文主要介紹自己從事web開發以來(從大二至今)看過的書籍和自己的成長過程，目的是給想瞭解JavaScript或者是剛接觸JavaScript的朋友，介紹如何通過循序漸進的看書來學習javascri ...
  • Html中判斷覆選框是否選中
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • 關於自學Web前端開發（供自己使用）
    別人的警告：大多數初學者學習網頁製作所用的集成開發環境（IDE）大多是Dreamweaver（我現在用的就是DW cc），這種所見即所得的“弔炸天”IDE為我們帶來了極大的方便。But：雖然它入門快，見效快，很容易讓初學者愛上，，聰明的IDE也成全了我們的惰性。 正確的方向勝過無謂的努力：也不知道它 ...
  • Less學習筆記(未完待續)
    作為 CSS 的一種擴展，Less 不僅完全相容 CSS 語法，而且連新增的特性也是使用 CSS 語法。這樣的設計使得學習 Less 很輕鬆，而且你可以在任何時候回退到 CSS（摘自官網） 1.變數 Less通過@來定義變數；Less中的變數為完全的常量，所以只能被定義一次 @base: #f938 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類