移動端適配的各種問題

2021-09-20 07:48:18 字數 2091 閱讀 2230

乙個100x100,單位px的div在蘋果6和蘋果6p上的大小一樣嗎?

單位畫素是相對單位

在同樣乙個裝置上,每1個css畫素所代表的物理畫素是可以變化的(即css畫素的第一方面的相對性);

在不同的裝置之間,每1個css畫素所代表的物理畫素是可以變化的(即css畫素的第二方面的相對性);

隨著蘋果發布更多尺寸的大屏手機,加上android生態中紛繁複雜的各種奇葩尺寸,移動設計全面進入「雜屏」時代。

沒有別的原因,iphone6 只是中型手機的乙個代表,從中間尺寸向上和向下適配的時候介面調整的幅度最小。

var dc = document.documentelement;

var mt = document.createelement("meta");

mt.name = "viewport";

mt.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";

var autosizie = function

() ;

autosizie();

window.addeventlistener('resize', autosizie, false);

複製**

幀動畫在部分機型上抖動問題

解決方案:

div 

複製**

這樣的頁面雖然看起來適配得很好,但是你會發現由於它是利用視口單位實現的布局,依賴於視口大小而自動縮放,無論視口過大還是過小,它也隨著視口過大或者過小,失去了最大最小寬度的限制

解決方案:結合rem單位來實現布局

1.給根元素大小設定隨著視口變化而變化的 vw 單位,這樣就可以實現動態改變其大小。

2.限制根元素字型大小的最大最小值,配合 body 加上最大寬度和最小寬度

對螢幕 resize 事件進行監聽,當判斷為豎屏時將整個根容器進行逆時針 css3 旋轉 90 度

var detectorient = function

() else

}window.onresize = detectorient;

detectorient();

複製**

解決橫屏的dom適配問題

$vw_base: 375;

$vw_fontsize: 20;

html

@media screen and (orientation: landscape)

}複製**

viewport-fit

ios11 新增特性,蘋果公司為了適配 iphonex 對現有 viewport meta 標籤的乙個擴充套件,用於設定網頁在可視視窗的布局方式,可設定三個值:

env() 和 constant()

ios11 新增特性,webkit 的乙個 css 函式,用於設定安全區域與邊界的距離,有四個預定義的變數:

// 需要適配 iphonex 必須設定 viewport-fit=cover,這是適配的關鍵步驟。

"viewport" content="width=device-width, viewport-fit=cover">

// 根據情況設定padding或者margin

padding-bottom: constant(safe-area-inset-bottom); /* 相容 ios < 11.2 */

padding-bottom: env(safe-area-inset-bottom); /* 相容 ios >= 11.2 */

複製**

關於移動端適配,就說這麼多了。

路漫漫其修遠兮,吾將上下而求索···

原文發布時間為:2023年06月25日掘金

移動端適配的各種問題

乙個100x100,單位px的div在蘋果6和蘋果6p上的大小一樣嗎?單位畫素是相對單位 在同樣乙個裝置上,每1個css畫素所代表的物理畫素是可以變化的 即css畫素的第一方面的相對性 在不同的裝置之間,每1個css畫素所代表的物理畫素是可以變化的 即css畫素的第二方面的相對性 隨著蘋果發布更多尺...

移動端適配問題

移動端web頁面,即常說的h5頁面 手機頁面 webview頁面等。適配問題產生的原因 手機裝置螢幕尺寸不一,做移動端的web頁面,需要考慮在安卓 ios的各種尺寸裝置上的相容,針對移動端裝置的頁面,設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。適配的目標 在不同尺寸的手機裝置上,頁面相對...

關於移動端適配問題

移動端適配採用rem進行編寫css,整理了三種方案 方案一 簡單的js適配 function resizeroot width document.documentelement.style.fontsize devicewidth num1 px resizeroot 750 window.onre...