bootstrap適配移動端

2021-09-08 03:56:16 字數 965 閱讀 1873

上次在pythonanywhere上掛上去的頁面,是這個樣子的

而在手機上看是這個樣子的

總之簡直不能看= =

於是在深夜我搭了乙個這種玩意兒

好吧確實比我寫的好看多了只是看起來怎麼這麼詭異呢。並且並不像能適配移動端的樣子。

想了非常久決定把頁面拆開來。第一頁放兩個button作為入口。其它的操作放在二級頁面分開來弄應該會好一些。

在移動裝置瀏覽器上。通過為視口(viewport)設定 meta 屬性為user-scalable=no能夠禁用其縮放(zooming)功能。這樣禁用縮放功能後。使用者僅僅能滾動螢幕。就能讓你的站點看上去更像原生應用的感覺。注意,這種方式我們並不推薦全部站點使用,還是要看你自己的情況而定!就是在head標籤裡加上這麼一段,就好了

移動端適配

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

移動端適配

不論裝置寬度是多少,統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大,都看作375px。width只能改變布局視口,不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...

移動端適配

無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...