从Bootstrap2迁移到Bootstrap3了，手机上的布局效果蛮不错。
22:03:02 +08:00 · 4352 次点击
把自己之前的一个小项目从Bootstrap2迁移到Bootstrap3了，感觉Mobile First的理念很不错啊，手机上的布局效果基本达到预期。使用UC浏览器访问： 喜欢折腾的童鞋们都可以考虑转到3啦 : )
7 回复 &| &直到
08:00:00 +08:00
& & 07:45:31 +08:00
楼主你那个源码是整站的源码么？
& & 08:02:06 +08:00
是整站的源码。
& & 08:15:35 +08:00 via Android
好棒的主题！！！我指的是诗词～
& & 09:08:28 +08:00
@ 个人爱好。不过看到现在的诗词网站的广告太多，就自己做了个。
& & 10:05:21 +08:00
不错，之前也想做一个书法欣赏站，兼卖字画，lz这个又结合了诗词，好！
& & 10:09:10 +08:00
效果不错来者
& & 10:20:19 +08:00
@ 欣赏/卖字画的话，这个站点还不错啊：99字画（
& · & 1108 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 57ms · UTC 00:24 · PVG 08:24 · LAX 16:24 · JFK 19:24? Do have faith in what you're doing.怎样让bootstrap设计的页面在手机端也能响应式自适应
怎样让bootstrap设计的页面不仅在电脑浏览器是响应式在手机端也是响应式呢？
也就是电脑端不同分辨率下的浏览效果跟相应分辨率下的手机端浏览效果是一样的呢？
闲话少说，直接上图看效果：
在用bootstrap设计好页面,并在火狐浏览器上进行调试,效果图如下：
但是在手机端浏览的时候发现整个页面被缩小的很小,连文字都看不清：
为什么会这样呢？
为什么bootstrap设计出来的页面样式虽然都一样,但是在手机端
显示的只是整个页面都缩小而不是响应式的呢？
后来才发现凡是bootstrap设计的页面都带有标签头:
&&meta name="viewport"
content="width=device-width, initial-scale=1"&
只要每个页面都加上这样的标签头,电脑端和手机端的效果就会保持一致，加了标签头
的效果图如下：
手机端和电脑端相同分辨率下的效果就保持一致了，
因为bootstrap设计的页面首先考虑的是移动端,
所以我们设计的响应式布局的页面
能很好的适应移动端、电脑端、平板等各种不同分辨率的设备.
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。bootstrap缩小页面布局就乱了_百度知道
bootstrap缩小页面布局就乱了
如图,图1是我浏览器全屏下显示的页面布局,这是我想要的,但是只要一缩小浏览器窗口布局就乱了(图2),请问怎样才能缩小浏览器窗口也让页面布局保持固定???
我有更好的答案
&lt看看这样行不行&...&/
&div&&&#47..&/row&&
&div class=&col-xs-4&&;div class=&&div class=&quot..;col-xs-4&/div&div& &col-xs-4&&.;div class=&quot
我用的就是col-xs-*这样的办法,不行...我感觉是响应式的问题...
那就禁止响应式布局，
采纳率：50%
为您推荐：
其他类似问题
bootstrap的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。&&完撒花时刻到了,bootstrap界面屏幕缩放排版布局错乱问题,求大牛解决...用的...界面全屏显示的时候是布局都好好的....但是如果窗口缩小点的话布局就会乱掉....该怎么解决呢...有没有办法让他根据窗口的大小去自动缩小...5个牛币所有回答列表(3)&LV1天啊，我不会最佳答案把table加上响应式的样式bootstrap不是响应式布局的么？ 有用到bootstrap的栅格么？等等等等等等等等等等等等相关问答等等等完等等等完等等完等最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友11被浏览4,380分享邀请回答&meta name="viewport" content="width=device-width, initial-scale=1.0"/&
这个要说到一个特殊的概念：viewport。根据苹果移动Safari的规定，viewport具有6个属性：width, initial-scale, minimum-scale, maximum-scale, height 和 user-scalable. 而在安卓设备中多一个属性target-densitydpi。 简单来说，移动设备加载页面时候会将页面加载在一个虚拟的窗口(viewport)里，而这个&meta&标签就是在页面初始化的时候用于控制这个窗口和实际设备屏幕的比例或者这个虚拟窗口的大小。更具体的请看这两篇文章：[1] [2] --------------------------------------------------------------------------------------------------------------------【2】我看有些网站是让手机端打开页面也完全按照PC端的格式布局，就是页面会缩得很小，但是格式不变。关于这个我猜测可能是两种情况：（1） &meta name="viewport" content="initial-scale=0.3"/& 以iphone 6 Plus的窗口举例，1：1情况下的窗口大小为414px * 736px如果initial-scale=1.0的情况下，页面得到的信息是：“你要显示在一块宽度为414px的屏幕上啦，整理好你的仪容仪表，准备出发”。于是根据Bootstrap CSS里media query的规则，这个页面会以宽度为414px的形式展现出来。也就是一般看到的手机版网页。如果是initial-scale=0.3的情况下，页面得到的信息是：“你要在一块宽度为1380px的屏幕上了，准备桌面版模式，出发！”。于是就出现了你看到的：页面会缩得很小，但是格式不变的情况。比如手机百度，当initial-scale-0.3的情况，如上图。（2）navigator.userAgent像题主现在在练习的是响应式布局（responsive layout），即是说一套代码在不同尺寸的设备上有不同的表现。这个和窗口尺寸有关而和设备无关，在一个宽度为1366px的安卓设备上和一个宽度为1366px的Linux设备上和一个宽度为1366px的Windows设备上，不考虑浏览器差异的情况下，同一个页面的表现可能是一样的。而有些特殊的原因，响应式布局并不是最优解。这时候就要针对移动小屏设备专门做一个页面，所以你们看到的很多大型网站手机页面和桌面页面布局，风格差异很大。这个时候就需要另外一个功能：userAgent（用户代理）。调出你浏览器的控制台（console），输入navigator.userAgent后，你会看到一串奇怪的信息：这个就是我Chrome浏览器里的用户代理了，这时候服务器可以通过你的request header（请求标题域）知道你是什么系统，什么浏览器。然后根据不同的设备后端可以返回不同的页面。桌面电脑看到的就是普通版页面，手机看到的就是专门为移动端优化过的手机页面。关于如何检测这个，请看Stakoverflow的这个回答希望能帮到你!6添加评论分享收藏感谢收起}