bootstrap適配移動端

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

這裏寫圖片描寫敘述

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

這裏寫圖片描寫敘述

總之簡直不能看= =bootstrap

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

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


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

在移動設備瀏覽器上。經過爲視口(viewport)設置 meta 屬性爲user-scalable=no可以禁用其縮放(zooming)功能。這樣禁用縮放功能後。用戶僅僅能滾動屏幕。就能讓你的站點看上去更像原生應用的感受。注意,這種方式咱們並不推薦所有站點使用,仍是要看你本身的狀況而定!就是在head標籤里加上這麼一段,就行了ui

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

這裏寫圖片描寫敘述

相關文章
相關標籤/搜索