bootstrap適配移動端


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

這里寫圖片描寫敘述

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

這里寫圖片描寫敘述

總之簡直不能看= =

看了一下學校幾個微信公眾號的頁面。都是用的bootstrap,好吧我也去試試看好了。
在bootsrtap首頁找到一個叫bootstrap表單構造器的玩意兒,好像能夠拿來用用。。

於是在深夜我搭了一個這種玩意兒
這里寫圖片描寫敘述
好吧確實比我寫的好看多了只是看起來怎么這么詭異呢。並且並不像能適配移動端的樣子。
想了非常久決定把頁面拆開來。第一頁放兩個button作為入口。其它的操作放在二級頁面分開來弄應該會好一些。


首先弄了兩個button。在button外面加上a標簽,結果發現按下去不能跳轉,后來把外面的form刪掉了就好了,ummmm
這里寫圖片描寫敘述
在電腦上改變瀏覽器的大小看上去沒什么問題。可是手機打開之后還是
太 小 了。
百度了半天最終找到解決的方法

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

這里寫圖片描寫敘述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM