标签: responsive-design

我期待在PHP中进行一些设备检测,我正在研究一些选项.现在看起来最好的是WURFL http://wurfl.sourceforge.net/.但由于它的非开源许可,我对它非常谨慎.我也想知道它是否相关,因为文档网站看起来有点过时了.

其他选项如WURFL包括http://deviceatlas.com/和http://51degrees.mobi/,但这些选项 都不接近开源.

然后是PHP专用解决方案,如 http : //detectmobilebrowsers.mobi,http://code.google.com/p/php-mobile-detect/和http://detectmobilebrowsers.com/但这些都使用某种形式的看起来丑陋的正则表达式.

对我来说,理想的解决方案是开源XML文件或数据库,我可以在本地存储,并且可以根据需要进行更新.

我在做梦吗？您更喜欢哪种解决方案来检测移动用户？

目前,我正在基于Twitter Bootstrap的网站中嵌入带有以下HAML代码的Youtube视频:

.row
  .span12
    %iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }

不幸的是,由于静态高度,在调整浏览器或移动设备的大小时,这不会很好.

为Youtube实现这个嵌入式iframe的更好(更具动态性和响应性)的方法是什么？

我在twitter-bootstrap中有一个div元素,其内容将在屏幕外垂直溢出.

我希望div取出浏览器窗口大小的高度,让其余内容在窗口中垂直滚动.

我有一个不能正常工作的样本@ jsFiddle

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

我在阅读之后发布了这个问题,所以像SO问题这样的问题

编辑 -

对不起伙计我想我的问题出错了.

我想要的是我的div必须填满屏幕中其余的垂直空间.

如果有人可以建议一个响应式解决方案,那就太好了

正如您可以在他们的页面上阅读的那样,新的Bootstrap 3是"先移动":

通过Bootstrap 2,我们为框架的关键方面添加了可选的移动友好样式.使用Bootstrap 3,我们从一开始就将项目重写为移动友好型.它们不是添加可选的移动样式,而是直接进入核心.事实上,Bootstrap首先是移动的.移动的第一个样式可以在整个库中找到,而不是在单独的文件中找到.

如何禁用响应？我希望我的网站不会重新安排自己的平板电脑或手机.

我尝试使用Bootstrap visible和hidden类来创建仅在移动/桌面上可见的内容.我注意到这些类没有正常工作(我注意到很多人都遇到了这个问题并以这种方式解决了)所以我创建了一个移动样式表来设置要在移动设备上显示哪些div.

这是我目前的代码:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

现在.mobile应该可以在移动屏幕上看到,900px宽度和更小.我使用Bootstrap类作为另一个div,.containerdiv并且到目前为止工作,但只有当我hidden-xs在我自己的移动CSS表中添加一个值时,就像这样;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

该.mobileDIV应该会显示在屏幕上900px或更小,但它仍然没有.我不确定为什么它没有,display:block是正确的用法吗？添加visible-xs并且visible-sm什么都不做.

这样做的正确方法是什么,为什么我的版本不起作用？

我目前正在研究响应式设计网站原型.到目前为止一切都那么好,但对于一个非常奇怪的事情,我似乎只能在Chrome中重现.在扩展窗口时,有时浏览器似乎陷入状态之间,显示重复的元素和两个滚动条 - 也就是说,直到我点击浏览器窗口之外的某个地方,然后一切都被重新绘制并且看起来很好.截图:

我已经尝试了大量的"技巧"来让chrome以编程方式"重新点击"界面,例如更改body元素的填充,修改scrollY位置,以及大约10个左右的其他人,但似乎什么也没做诀窍.有人对这个有经验么？有什么建议？

我试图隐藏列我响应式设计的时候col-xs和col-sm.我首先尝试使用hidden-xs/hidden-sm类,但这不起作用.我也尝试使用visible-desktop这里提到的:Twitter Bootstrap Responsive - 仅在桌面上显示表列

这也行不通.做这个的最好方式是什么？我宁愿不做两个单独的表然后隐藏一个或另一个.

我试过的代码当前没有用:

<table>
    <thead>
        <th>Show All the time</th>
        <th class="hidden-xs hidden-sm">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="hidden-xs hidden-sm">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>

这是一个JSFiddle,显示我的代码在行动.

我想使用Twitter Bootstrap 3考虑响应性,以最正确的方式在表单的不同部分之间添加几个像素的间距.我查看了文档,但我仍然不清楚实现这一目标的最佳方法是什么.

有任何想法吗？

这是我目前的表单HTML:

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="timezone">Timezone</label>
    <select class="form-control" id="timezone" name="timezone">
      <option value="America/St_Lucia">America/St_Lucia</option>
      <option value="Europe/Nicosia">Europe/Nicosia</option>
    </select>
  </div>

  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>

  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>

  <button class="btn" type="submit">Save</button>
</form>

iPhone 6和iPhone 6 Plus刚刚宣布.但是像往常一样,手机规格永远不会device-width在CSS Pixels或DPR中给出元视口大小width=device-width,initial-scale=1.

已经做出预测,推测375/414px视口宽度,但仍然不清楚......

注意:请不要使用已知的整体设备分辨率或规格推测或发布答案,这不是我想要的.我想要默认的响应式纵向和横向视口宽度(以像素为单位).

我正在寻找一种方法来保持屏幕边界内的模态对话框,即它的高度始终小于屏幕高度,并相应地调整宽度.我试过了:

.modal-dialog {
  max-height: 100%;
}

但这似乎没有任何影响.

http://jsfiddle.net/ma4zn5gv/

举例说明:

如果它存在,我更喜欢纯CSS解决方案(没有js).为了清楚起见,我正在寻找最大高度,而不是高度(即模态不高于屏幕,保持原样).