js 片段 移動端適配簡易步驟

2022-04-29 07:39:08 字數 1472 閱讀 9613

手機端全部適配簡易步驟,不確保沒有bug。

1、html 的 head 部分中加入如下**:

<

meta

name

="viewport"

content

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

>

其中 width:viewport 的寬度,可以指定為乙個畫素值,如:640,或者為特殊的值,如:device-width (裝置的寬度)。

initial-scale:初始縮放比例,即當瀏覽器第一次載入頁面時的縮放比例。值為 1.0 即原始尺寸。

maximum-scale:允許瀏覽者縮放到的最大比例,一般設為1.0,即原始尺寸。

minimum-scale:允許瀏覽者縮放到的最小比例,一般設為1.0,即原始尺寸。

user-scalable:瀏覽者是否可以手動縮放,yes 或 no 。

2、html 中引入 一段自動適配所有視窗的 js 。

html **如下 ( 假設你的 js 在 scripts 資料夾下,命名為 demo.js ):

適配的 js **如下 (將如下**複製貼上到你的 demo.js 中):

(function

(doc, win);

if (!doc.addeventlistener) return

; win.addeventlistener(resizeevt,recalc,

false

); doc.addeventlistener('domcontentloaded',recalc,false

);})(document,window);

3、css 中 在最開始設定 html 的 font - size :20px;(這個 size 標準由你定)**如下:

html
然後 假設你部門的設計師給你的 頁面 標準寬度為 640px,則頁面中所有的 寬高 全部除以 2 ,chrome 瀏覽器 模擬手機頁面 設定手機型號為 iphone 4 。這也就是為什麼要將所有的寬高除以 2 的原因:iphone 4 標準 寬 是320 px。 然後 正常的用 px 為單位 寫你的 css ,你所需要做的就是你寫的頁面,要在 iphone 4 完全正確顯示。如果你說,那設計那邊給的不是 640 標準怎麼辦?你只要讓你的頁面按照設計圖在 iphone 4 上正確顯示,就木問題。

4、頁面 css 全部寫完之後,將所有的 px 轉換為以 rem 為單位的數字。例如 我設定 body 的 width :320px; 則根據 我在第三步設定的 font - size 值,轉換為 rem ,則是

width :16 rem; 【320 / 20 (你設定的標準 font - size) = 16】。

5、大功告成,隨意切換機型,盡情得瑟吧~

移動端js適配檔案

function doc,win abort if browser does not support addeventlistener if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.add...

移動端適配JS和CSS

移動端適配一般是兩種方式 一js方式 setrem window.addeventlistener orientationchange setrem window.addeventlistener resize setrem function setrem js方式書寫方便,而且適配所有的機型,但是...

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...