溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Android屏幕寬度與自適應(yīng)頁面的內(nèi)容有哪些的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Android屏幕寬度與自適應(yīng)頁面的內(nèi)容有哪些文章都會有所收獲，下面我們一起來看看吧。
為了讓頁面在所有的設(shè)備上都能友好的瀏覽，需要針對屏幕不同寬度對頁面布局進行調(diào)整。屏幕寬度各有不同，不可能對所有屏幕寬度都進行處理。這里探討主流設(shè)備寬度和以及合理的分類方式。
通常會大體上分為手機、平板、桌面設(shè)備。
| iPhone 5 | iPhone 8 | iPhone 8 Plus | iPhone 12 min | iPhone 12 Pro | iPhone 12 Pro Max |
|---|---|---|---|---|---|
| 320*568 | 375*667 | 414*736 | 360*780 | 390*844 | 428*926 |
此處是邏輯分辨率，不是物理分辨率
雖然手機有越做越大的趨勢，但受限于手掌寬度，不可能無限擴大。目前最大的iPhone不過428px，就算未來還有加大的可能，最大應(yīng)該不會超過500px。
| iPad mini 第五代 (7.9英寸) | iPad 第八代 (10.2英寸) | iPad Air 第四代 (10.9英寸) | iPad Pro 第二代 (11英寸) | iPad Pro 第四代 (12.9英寸) |
|---|---|---|---|---|
| 1024*768 | 1080*810 | 1180*820 | 1194*834 | 1366*1024 |
最小的iPad豎屏是768px，這也是分割手機和平板的交界點。最大的平板則可以當(dāng)筆記本電腦使用了。
| MacBook Air (13 英寸) | MacBook Air 2017 (13 英寸) | MacBook Air (16 英寸) | Windows 筆記本 (13英寸) | Windows 筆記本 (14英寸) |
|---|---|---|---|---|
| 1280*800（放大2.0倍） | 1440*900 | 1536*960（放大2.0倍） | 1280*720（放大1.5倍） | 1366*768 |
筆記本范圍基本在1280至1536之間。1280是分割筆記本電腦和ipad的交界點。為了便攜，筆記本電腦的屏幕會固定在13-14英寸之間。16英寸可以看作是筆記本電腦的極限了。
雖然臺式電腦的顯示器看起有更大的擴展空間，但考慮到桌面大小，以及人眼的視線范圍，桌面顯示器會以23.8英寸和27英寸的1920*1080為主流。27英寸的2K顯示器字太小，32英寸的2K顯示器則太大了。即使是臺式電腦，1920px的寬度也已經(jīng)是極限了。
由于臺式機的用戶越來越少，且過寬的屏幕需要轉(zhuǎn)頭才能瀏覽，體驗并不好。所以對更大的屏幕進行優(yōu)化是否值得，是一個值得商榷的問題。
| xs | sm | md | lg | xl | xxl |
|---|---|---|---|---|---|
| <576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1400px |
xxl的1400px對應(yīng)的是MacBook Air 2017 1440*900分辨率顯示器?？雌饋硖×艘稽c，但也許Bootstrap認(rèn)為更寬的屏幕已經(jīng)沒有意義，用戶量少且體驗不佳。畢竟需要轉(zhuǎn)頭才能瀏覽的寬屏，是沒有必要專門去適配的。
| 默認(rèn) | sm | md | lg | xl | 2xl |
|---|---|---|---|---|---|
| <640px | ≥640px | ≥768px | ≥1024px | ≥1280px | ≥1536px |
2xl的1536px與MacBook Pro 16 英寸的1536*960一致。在MacBook不再生產(chǎn)1440*900分辨率，臺式顯示器也少有這個分辨率的情況下，1536也許會是一個更明智的選擇，即照顧到了臺式顯示器，也兼顧了MacBook Pro 16英寸筆記本。
| xs | sm | md | lg | xl |
|---|---|---|---|---|
| <768px | ≥768px | ≥992px | ≥1200px | ≥1920px |
768px 是 iPad mini 的最小寬度，以此點作為手機和平板的分界線是合理的。不管是更小的576px或者是640px，其實意義都不大，基本不會對這個尺寸再進行適配。
但以1920px作為最大的寬度，則沒有使用1536px好。
| xs | sm | md | lg | xl | xxl |
|---|---|---|---|---|---|
| <576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1600px |
使用1600px作為最大的寬度，顯然是針對臺式電腦的?？紤]到蘋果的1536px屏幕，應(yīng)該使用1536px作為最大寬度會好一些。
關(guān)于“Android屏幕寬度與自適應(yīng)頁面的內(nèi)容有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Android屏幕寬度與自適應(yīng)頁面的內(nèi)容有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
