zoukankan      html  css  js  c++  java
  • 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">

    这里写图片描写叙述

  • 相关阅读:
    django关闭调试信息,打开内置错误视图
    django 配置URLconf和获取值
    django模版中配置和使用静态文件方法
    django的模型类管理器-----------数据库操作的封装
    美团校招的算法题:灯泡游戏
    ccTouchBegan
    特效effects(二)
    特效effects
    CCProgressTo和CCProgressTimer
    TransitionsTest
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5349941.html
Copyright © 2011-2022 走看看