本人之前已经使用Bootstrap有一段时间了,但是之前做出的网站都只是在电脑端使用,没有注意过手机端的显示效果。这两天自己使用Bootstrap做了一个简单的Web个人日志系统,想在手机端也使用,桌面端的效果勉勉强强,但是当用手机打开页面时,效果不忍直视。下面是其中一个界面的效果。
桌面浏览器查看效果:
手机浏览器查看效果:

问题一:字体非常的小,简直认不出来

于是我百度以及查看Bootstrap的文档,终于找到了解决方案:
<meta name="viewport" content="width=device-width, initial-scale=1">
可以参见Bootstrap中文文档中的原话:
只要在<header>中加上这句话,手机端看到的字体就会比较合理。看下面的效果图。
 
现在看起来效果好多了,文字能够非常清晰的显示出来。

问题二来了:上面的<ul>导航占了太多的空间,影响了核心内容的显示

我的导航是用以下代码实现的:
<div>
<ul class="list-group text-align-center">
<li class="list-group-item"><h3>效率为王</h3></li>
<li class="list-group-item"><a href="timeflow">流水</a></li>
<li class="list-group-item"><a href="summary">总结</a></li>
<li class="list-group-item"><a href="idea">灵感</a></li>
<li class="list-group-item"><a href="thought">感想</a></li>
</ul>
</div>
我想让”流水””总结”等4个导航链接排列在一行中,但又不想自己大改Bootstrap原来的CSS (实际上自己也不是很熟练CSS)。于是我就想绕开CSS的细节技术,想到了在超小屏幕下不显示这个导航,转而实现一个简单的超链接列表。
<div class="hidden-xs">
<ul class="list-group text-align-center">
<li class="list-group-item"><h3>效率为王</h3></li>
<li class="list-group-item"><a href="timeflow">流水</a></li>
<li class="list-group-item"><a href="summary">总结</a></li>
<li class="list-group-item"><a href="idea">灵感</a></li>
<li class="list-group-item"><a href="thought">感想</a></li>
</ul>
</div>
<div class="hidden-sm hidden-md hidden-lg hidden-print">
<h3>效率为王</h3>
<a href="timeflow">流水</a>
<a href="summary">总结</a>
<a href="idea">灵感</a>
<a href="thought">感想</a>
<hr/>
</div>
上面的代码是在原来的<div>上应用了.hidden-xs样式,意思是超小屏幕下不显示该<div>。然后我又写了一个简单的<div>,包含4个导航链接,而这个<div>则应用了.hidden-sm.hidden-md .hidden-lg .hidden-print样式,表示只在超小屏幕下显示。
关于.hidden-?样式,可以在Bootstrap中文文档中看到这样一段画:
看应用代码之后的效果图。
嗯,这样的效果更加能够接受一些。

问题三又来了:两个箭头按钮和日期没有在一行上,而空间上明明够显示在一行

仔细检查我的代码并细致分析后,发现我使用的是.col-sm-4来为三个元素分配空间,当我把设置改为.col-xs-4时,一切都好了。
 
关于col-?-?可以在Bootstrap中文文档中找到相关说明:

总结

Bootstrap v3本来就是一个移动为先的框架,可是我在使用的时候却丢弃了它的精髓,当作了一个简单的排版工具和组件皮肤使用。
从使用Bootstrap的一开始就应该考虑手机端的显示效果,使用col-xs-? col-sm-?来为元素分配空间,最简单的情况就是只设置col-xs-?,因为更大的屏幕规则如果没有设置的画会继承小屏幕规格的设置。
还有,不要忘了加上<meta name="viewport" content="width=device-width, initial-scale=1">
感觉还是学到了不少!

Bootstrap初级用户谈谈网页在手机上的显示效果优化的更多相关文章

  1. 什么是Viewport Meta(width详解)及在手机上的应用

    viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机 ...

  2. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  3. fontforge制作自定义字体及在手机上应用举例——张鑫旭

    一.看似无关紧要的事件背景 之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话 ...

  4. h5 audio标签在手机上不能自动播放????

    最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结 ...

  5. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  6. 微信小程序客服消息开发实战:实时在手机上接收小程序客服消息通知,以及在手机上回复

    在微信小程序开发中,可以非常方便的集成客服功能,只需要一行代码便可以将用户引导至客服会话界面.这行代码就是: <button open-type="contact" bind ...

  7. Ionic生成的App安装在手机上后无法联网的解决方案

    在Ionic中使用inappbrowser.themeablebrowser 组件打开网页,刚开始是好的,后来不知添加什么插件,导致了安装在手机上以后没有网络访问权限. 尝试了很多,最后才发现,此时, ...

  8. canvas绘图在手机上边缘粗糙

    辛辛苦苦用canvas绘图,做好动画后,想看看效果,结果在手机上一打开,效果是有了,但是边缘特别粗糙,这怎么可以呢,有一种说法是你用canvas绘图时候在手机retain屏幕上,他把一个像素分为两个像 ...

  9. vue.js学习之 如何在手机上查看vue-cli构建的项目

    vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...

随机推荐

  1. web服务器【apache/nginx] 关闭目录的浏览权限

    web服务器[apache/nginx] 关闭目录的浏览权限 我的配置(将Options 中的Indexes干掉): <VirtualHost *:80> ServerAdmin webm ...

  2. Linux进程间通信(IPC)

    序言 linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的. 而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心) ...

  3. Android核心分析 之二方法论探讨之概念空间篇

    方法论探讨之概念空间篇 我们潜意识就不想用计算机的方式来思考问题,我们有自己的思维描述方式,越是接近我们思维描述方式,我们越容易接受和使用.各种计算机语言,建模工具,不外乎就是建立一个更接近人的思维方 ...

  4. java基本数据类型存储范围

    数据类型可以分为两大类: 1)基本类型: 2)扩展类型. 先来看一下Java语言的基本数据类型.它包括 类型    描述   取值范围 Boolean 布尔型 只有两个值true.false Char ...

  5. C# 访问USB(HID)设备

    原文:C# 访问USB(HID)设备 二话不说,直接给代码,如果您真想做这方面的东西,还是稍微研究下,没有现成的好类用,就需要自己了解其原理 //引用空间 using System; using Sy ...

  6. 如何在Java客户端调用RESTful服务

    在这个例子中,我们将看到如何使用java.net包实用工具,创建一个访问REST服务RESTful的客户端.当然这不是创建一个RESTful客户端最简单的方法,因为你必须自己读取服务器端的响应,以及J ...

  7. Bootstrap学习笔记之整体架构

    之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用, ...

  8. JSP的执行过程及其异常处理机制

    1.JSP的执行过程     虽然JSP感觉上很像一般的HTML网页,但事实上它是以Servlet的形式被运行的.因为JSP文件在第一次运行的时候会先解释成Servlet源文件,然后编译成Servle ...

  9. Windows7配置GPU和Theano编程环境

    可参考Windows安装Theano官方教程: http://deeplearning.net/software/theano/install_windows.html#install-windows ...

  10. Google 镜像站大集合

    没有了google的日子是相当难受,下面推荐一些google的镜像站,感谢原文博主的无私奉献,同时也欢迎大家总结科研上的小技巧,心得等来本平台投稿,好东西当然要拿出来共同分享! 以下镜像站分原版和非原 ...