上次在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...