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

bootstrap适配移动端的更多相关文章

  1. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  2. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  3. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  4. 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用

    从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...

  5. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  6. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  7. 九、响应式发:rem和less(适配移动端)

    一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem ...

  8. asp.net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  9. asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

随机推荐

  1. PV是什么意思

    现在国内的站点都号称自己能统计pv,不过听我讲完pv到底是什么,估计所有的站长都要笑了.     pv的意思,就是一个访问者在24小时(0点到24点)内到底看了你网站几个页面.     不过在国内,由 ...

  2. 1.解剖Linq to object

    LINQ想必大家都不陌生了,它的出现使得我们的代码变得更短.更优雅了.至于LINQ是什么,Linq to object这类的扩展方法到底做了些什么.我们使用的EF是如何实现的(如何解析Expressi ...

  3. Dev gridControl z

    Dev gridControl 添加表标题 1.OptionsView ->ShowViewCaption = True 2.ViewCaption = "标题" Dev g ...

  4. Asp.Net学习进度备忘(第一步:ASP.NET Web Forms)

    书签:“Web Pages”和“MVC”跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1.ASP. ...

  5. Linux操作系统中,.zip、.tar、.tar.gz、.tar.bz2、.tar.xz、.jar、.7z等格式的压缩与解压

    zip格式 压缩: zip -r [目标文件名].zip [原文件/目录名] 解压: unzip [原文件名].zip 注:-r参数代表递归 tar格式(该格式仅仅打包,不压缩) 打包:tar -cv ...

  6. C#判断程序是由Windows服务启动还是用户启动

    在Windows系统做网络开发,很多时候都是使用Windows服务的模式,但在调度阶段,我们更多的是使用控制台的模式.在开发程序的时候,我们在Program的Main入口进行判断.最初开始使用Envi ...

  7. gcc 安装

    最近在中标麒麟上面工作,结果发现上面gcc都没有,没有办法只好自己装(PS 中标麒麟:怪我咯) 资源:http://download.csdn.net/detail/jiahuat/8715413 按 ...

  8. 安卓动画之ObjectAnimator

    ObjectAnimator 不仅仅移动位置,还移动了对象view 先来代码片段: //Y轴变换 ObjectAnimator oa = ObjectAnimator.ofFloat(imageVie ...

  9. something: 重构、正则、vim -- clwu

    项目需要做一个db table 操作的小工具. 从phpMyAdmin上拷贝了一些代码过来修改,但我有没有足够的时间把所有拷贝过来的代码都重构修改和测试完,于是希望后面接手的同事在需要修改这些代码时能 ...

  10. Masonry 实现输入框随键盘位置改变

    Github: https://github.com/saitjr/MasonryDemo 直接上代码: #import "ViewController4.h" #import & ...