移动设备自适应

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.

自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。它提供了简单的布局方式,以及各种插件,组件。更能开苏开发移动端项目。

那怎样让你的bootstrap页面更好的适应于移动端呢?

加入如下标签,便可适应于移动端设备。让你的页面在pc端与移动端一致。

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

通过给视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。

但是,并不是所有情况都这样做。

?:

width 设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
发布了79 篇原创文章 · 获赞 36 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/yezi__6/article/details/87651827