• 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">

    这里写图片描写叙述

  • 相关阅读:
    PHP获取指定的时间戳
    Elasticsearch
    git有用基本指令
    php中的json_decode
    有用的sql积累
    git submodule使用原理
    mysql重复插入时insert更改为update更新操作
    jpm
    awk 语句
    tomcat 发布简单的html网站
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5349941.html
Copyright © 2020-2023  润新知