實(shí)戰(zhàn)：移動(dòng)端適配的最佳實(shí)踐

移動(dòng)端適配我們需要做哪些事情? 一個(gè)最佳實(shí)踐除了設(shè)置 viewport 和 rem 基準(zhǔn)值，隨著iPhone手機(jī)的不斷升級(jí)，我們不得不正視以下2個(gè)問(wèn)題：

乳山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

• 安全區(qū)域適配
• 識(shí)別劉海屏

關(guān)于viewpoint-fit

在切入正題之前，我們先展開(kāi)介紹一下viewpoint-fit，它的作用是用于設(shè)置可視區(qū)域的尺寸，屬性如下：

最初的布局視窗是通過(guò)物理設(shè)備的屏幕進(jìn)行計(jì)算，如下圖所示：

圓形的屏幕上上顯示的頁(yè)面的一部分，目前是圓的但視窗是長(zhǎng)方形的。因此,根據(jù)窗口的大小，頁(yè)面的某些部分可以省略。viewport-fit 可以通過(guò)設(shè)置可視區(qū)域的大小來(lái)控制被省略的區(qū)域。

• auto：當(dāng)設(shè)置成auto時(shí)，不會(huì)影響初始布局視口，并且整個(gè)網(wǎng)頁(yè)都是可見(jiàn)的。 UA在視口外部繪制的內(nèi)容未定義。 它可能是畫(huà)布的背景顏色，也可能是UA認(rèn)為合適的任何其他顏色。
• contain：當(dāng)設(shè)置成contain時(shí)，初始布局視口和可視視口設(shè)置為最大矩形，該矩形內(nèi)接在設(shè)備的顯示中。 UA在視口外部繪制的內(nèi)容未定義。 它可能是畫(huà)布的背景顏色，也可能是UA認(rèn)為合適的任何其他顏色。
• cover：當(dāng)設(shè)置成cover時(shí)，初始布局視口和可視視口設(shè)置為設(shè)備物理屏幕的外接矩形。

注意：當(dāng)設(shè)置成 contain時(shí)，border-boundary: display 和 shape-inside: display 無(wú)效。

在非矩形顯示器上設(shè)置視口邊界框的大小時(shí)，我們必須考慮以下因素：

• 由于視口邊界框的區(qū)域大于顯示區(qū)域而導(dǎo)致的剪切區(qū)域
• 視口的邊界框與顯示區(qū)域之間的間隙

開(kāi)發(fā)者可以決定哪個(gè)因素比另一個(gè)更重要。 如果必須保證網(wǎng)頁(yè)的任何部分都不被隱藏，則避免剪切比在視口的邊界框和屏幕邊界之間留有間隙更重要。 如果開(kāi)發(fā)者不希望網(wǎng)頁(yè)因可讀性而變小，那么最好將viewport-fit設(shè)置為cover并在考慮剪裁部分的情況下實(shí)現(xiàn)頁(yè)面。

示例演示

為了方便理解，下面是針對(duì) contain 和 cover 的示例代碼和效果圖

當(dāng)使用contain時(shí)，初始視口將應(yīng)用于顯示的最大內(nèi)接矩形：

@viewport (
viewport-fit: contain) {
   
/* CSS for the rectangular design */
} 

當(dāng)使用cover時(shí)，初始視口應(yīng)用于顯示的外接矩形：

@viewport {
   
viewport-fit: 
cover;
}
@media (
shape: round){
   
/* styles for the round design */
}
@media (
shape: rect){
   
/* styles for the rectangular design */
}

安全區(qū)域適配

根據(jù)上文所述，為了安全區(qū)域不影響頁(yè)面渲染，我們可以使用viewport-fit等于cover來(lái)來(lái)解決：

<
meta 
name=
"viewport" 
content=
"width=device-width, initial-scale=1.0, viewport-fit=cover" /> 

識(shí)別劉海屏

ios識(shí)別劉海屏比較容易，我們可以通過(guò)計(jì)算屏幕的寬度和高度來(lái)快速識(shí)別。首先我們羅列一下iPhone現(xiàn)有機(jī)型的屏幕尺寸：

其中 iPhone XS Max、iPhone XS、iPhone XR、iPhone X 需要適配劉海屏，而這4類(lèi)屏幕在真機(jī)或模擬器里表現(xiàn)出來(lái)的screen尺寸是有一個(gè)共性的：

screen.width 
=== 
375 
&& 
screen.height 
=== 
812
或
screen.width 
=== 
414 
&& 
screen.height 
=== 
896

完整的代碼如下：

function 
deviceDetection(
){
 
const ua = navigator.userAgent
 
let osVersion = 
''
 
let device = 
''
 
try {
   
if (
/android/i.test(ua)) {
     device = 
'android'
     osVersion = ua.match(
/Android\s+([\d.]+)/i)[
0].replace(
'Android ', 
'')
   } 
else 
if (
/ipad|iphone|ipod/i.test(ua)) {
     device = 
'ios'
     osVersion = ua.match(
/OS\s+([\d_]+)/i)[
0].replace(
/_/g, 
'.').replace(
'OS ', 
'')
   }
 } 
catch (err) {
   
/* istanbul ignore next line */
   
console.error(err)
 }
 
return { osVersion, device }
}

// 判斷是否為劉海屏
export function isFringe() {
  const { device } = deviceDetection()
  const { screen } = global
  return device === 'ios' &&
	((screen.width === 375 && screen.height === 812) || (screen.width === 414 && screen.height === 896))
}

此外，Android端雖然劉海屏機(jī)型較為雜多，但我們習(xí)慣容器上會(huì)把狀態(tài)欄的高度和劉海對(duì)齊，從而不影響內(nèi)容的展示

更多的教程也會(huì)繼續(xù)更新，不清楚的地方，可以留言。視頻教程的話，也有整理，要的伙伴，回復(fù)：教程，領(lǐng)?。?/p>

文章名稱(chēng)：實(shí)戰(zhàn)：移動(dòng)端適配的最佳實(shí)踐
標(biāo)題鏈接：http://muchs.cn/article16/igegdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、云服務(wù)器、、網(wǎng)站策劃、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)