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

时间： 2024-08-29 16:57:51

bootstrap适配移动端的相关文章

让 jQuery UI draggable 适配移动端

背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是mousedown.mousemove.mouseup来描述拖拽和鼠标的点击事件,而在移动端里,肯定要新添touchstart.touchmove.touchend来描述拖拽和手指的点击事件实现 demo: <!DOCTYPE html> <html lang="en"

九、响应式发：rem和less（适配移动端）

一.响应式开发响应式开发优先适配移动端又兼容到pc端官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem和em:https://blog.csdn.net/u010132177/article/details/103725945 参考:https://www.jianshu.com/p/58a061c6e9af 1.1安装less依赖 cnpm install less less-loader --s

bootstrap table 服务端分页

前端js $(function () { //$('#MDTable').bootstrapTable('destroy'); $("#MDTable").bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器数据,初始化表格的内容Destroy the bootstrap table. toolbar: '#toolbar', //工具按钮用哪个容器 method: 'get', url: "/MD_All/MD_Data",

nginx适配移动端

考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. nginx判断设备根据useragent,国外有个开源的User-Agent区分pc和手机的解决方案可以直接使用: set $mobile_rewrite do_not_perform; if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avant

js 图片区域可点击，适配移动端，图片大小随意改变

实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了. 在这里,我使用的js基于canvas写的一个小工具.可以圈出你需要点击的部分,然后生成一串json,在预览页面就可以看见效果了: 在实际应用中,只要用工具处理一下图片,再把数据存入数据库,就很方便了: 使用工具时,先上传图片.然后就可以圈了,圈完一定要记得,点击保存数据,,,接着就可以预览了,预览点击的效果,可以看控制台, 首先是工具首先工具的html <!DOCTYPE html>

js动态适配移动端font-size,单位：rem

比如:目前我手中有一张psd图,大小为640*1010,适配苹果5的手机. 方法步骤: 1.我采用font-size=10px为640*1010手机的初始像素大小: 1rem=10px: 此时psd上有一个文字的大小为20px,即当前我的字体大小用rem表示为:font-size:1rem (psd上的大小为html上大小的2倍,so首先要除以2才能得到正确的px,之后换算rem再次除以2就ok了) 适配各种手机的rem单位: 2.获取我当前使用手机的width: var windowW

pc端适配移动端

废话不多说了,心里难受在html页面头部加上 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> content属性值 : width:可视区域的宽度,值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放 maxi

适配移动端的简单弹出框居中效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #mask_box { 7 width:100%; 8 height:100%; 9 z-index:9999; 10 position:fixed; 11 top:0; 12 left:0; 13 display: none; 14 } 15 #Dia

Less适配移动端rem

@ue-width: 750; /* 设计图的宽度 */ .px2rem(@px) { @remValue: @px/@ue-width*10; @pxToRem: ~"@{remValue}rem"; } /*使用*/ .cat-icon { .px2rem(100); width: @pxToRem; height: @pxToRem; } 写法比较局限,一个class中只能有一个数值做转换,连续使用会按照最后一个计算出的rem值解析. 多次使用要多次设置类名.累赘. 先记录下.以