整體縮放頁面適配移動端js原始碼

2021-10-22 23:48:16 字數 2432 閱讀 3173

大家在適配頁面的web端和移動端時候,

如果不需要那麼麻煩,就可以使用js進行整體縮放,

只需要引入乙個js,改動htmll頭部**即可

切記:1.該 js 應在 head 中盡可能早的引入,減少重繪。

2.定寬(視窗縮放): 對應 meta 標籤寫法 –

750 是效果圖內容區域的寬度,一般為 640 或 750

html頭部**:

"utf-8"

>

"viewport" content=

"width=640"

>

"viewport" content=

"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge,chrome=1"

>

"renderer" content=

"webkit"

>

"referrer" content=

"never"

>

整體縮放<

/title>

"__public__/js/mobile-util.js"

>

<

/script>

js原始碼:

/**

* 該 js 中,包含常用的 ua 判斷、頁面適配、search 引數轉 鍵值對。

* 該 js 應在 head 中盡可能早的引入,減少重繪。

* * fixscreen 方法根據兩種情況適配,該方法自動執行。

* 1. 定寬(視窗縮放): 對應 meta 標籤寫法 --

750 是效果圖內容區域的寬度,一般為 640 或 750

* 該方法會提取 width 值,主動新增 scale 相關屬性值。

* 注意: 如果 meta 標籤中指定了 initial-scale, 該方法將不做處理(即不執行)。

*

* 2. rem: 不用寫 meta 標籤,該方法根據 dpr 自動生成,並在 html 標籤中加上 data-dpr 和 font-size 兩個屬性值。

* 該方法約束:ios 系統最大 dpr = 3,其它系統 dpr = 1,頁面每 dpr 最大寬度(即頁面寬度/dpr) = 750,rem 換算比值為 16。

* 對應 css 開發,任何彈性尺寸均使用 rem 單位,rem 預設寬度為 視覺稿寬度 / 16;

* scss 中 $ppr(pixel per rem) 變數寫法 -- $ppr: 750px/16/1rem;

* 元素尺寸寫法 -- html body 。

*/window.mobileutil =

(function

(win, doc)

var rem = width /16;

docel.style.fontsize = rem +

'px';}

; win.

addeventlistener

('resize'

,function()

,false);

win.

addeventlistener

('pageshow'

,function

(e)}

,false);

refreshrem()

;}else

if( ismobile &&

!matchscale &&

( matchwidth && matchwidth[1]

!='device-width'))

}function

fillscale

(scale)},

/** * 轉href引數成鍵值對

* @param href 指定的href,預設為當前頁href

* @returns 鍵值對

*/getsearch:

function

(href)

,reg =

newregexp

("([^?=&]+)(=([^&]*))?"

,"g");

href && href.

replace

(reg,

function($0

,$1,$2

,$3))

;return data;}}

;})(window, document)

;// 預設直接適配頁面

mobileutil.

fixscreen()

;

js整體縮小網頁 js實現整體縮放頁面適配移動端

該 js 中,包含常用的 ua 判斷 頁面適配 search 引數轉 鍵值對。該 js 應在 head 中盡可能早的引入,減少重繪。fixscreen 方法根據兩種情況適配,該方法自動執行。1.定寬 視窗縮放 對應 meta 標籤寫法 750 是效果圖內容區域的寬度,一般為 640 或 750 該方...

js整體縮小網頁 js實現整體縮放頁面適配移動端

大家在適配頁面的web端和移動端時候,如果不需要那麼麻煩,就可以使用js進行整體縮放,只需要引入乙個js,改動htmll頭部 即可 切記 1.該 js 應在 head 中盡可能早的引入,減少重繪。2.定寬 視窗縮放 對應 meta 標籤寫法 750 是效果圖內容區域的寬度,一般為 640 或 750...

移動端頁面的適配

一 關於viewport設定 二 關於不同裝置rem大小的計算,以及動態設定畫素縮放比 function setsize 三 koala將less轉義為css的運用 設計稿寬度為 750px,與iphone6為整倍數關係,故選iphone6為除錯裝置。選擇除錯裝置時,最好選擇與設計稿寬度成整倍數的裝...