相关疑难解决方法(0)

我有一个元素,需要它的宽度没有(!)垂直滚动条.

Firebug告诉我身体宽度是1280px.

这些都可以在Firefox中正常工作:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

他们都返回1263px,这是我正在寻找的价值.

但是所有其他浏览器都给我1280px.

是否有跨浏览器的方式来获得没有(!)垂直滚动条的全屏宽度？

对于响应式模板,我在CSS中有一个媒体查询:

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

并且,我在调整大小到日志宽度时创建了一个jQuery函数:

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

与CSS检测和JS结果有区别,我有这个元:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

我想这是由于滚动条(15像素).我怎么能做得更好？

有没有办法可靠地告诉浏览器的视口宽度,包括滚动条,而不是浏览器窗口的其余部分)？

这里列出的所有属性都没有告诉我屏幕的宽度包括滚动条(如果有的话)

我目前正在使用Bootstrap 4 alpha 4.

我已经买了一个我开始研究和修改的网站.我有一个特别奇怪的问题,我认为必须以某种方式与媒体查询相关.原始开发者拒绝解决这个问题.

当我访问网站并将视口宽度调整到992px和1008px之间的任何地方(两者都包含)时,网站部分会消失,因为此响应断点未在已建立的Bootstrap类中定义.我已经使用最新的Chrome和FF浏览器进行了测试.

有没有人知道如何调试这个东西？

我试图寻找值992和1008以及+/- 1的CSS文件,但该1008值未找到任何地方(在整个项目!)和992值正在样式表AFAIK内正常使用.

你可以在这里看到这个问题.当您在992px和1008px之间调整浏览器宽度时,徽标将消失.

我写过这样的CSS媒体查询 -

@media screen and (max-width: 59.9375em) {
  .left {
   display: none;
  }
}

这适用于除Safari 10.0.4及更低版本之外的所有浏览器.Safari似乎以不同方式处理媒体查询.

其他浏览器似乎将window.innerWidth作为用于触发媒体查询的视口宽度,但safari似乎将document.documentElement.clientWidth作为视口宽度并相应地触发媒体查询.

我可以看到实际断点和预期断点之间的差异为15px.我正在寻找一种跨浏览器的方式来处理这个问题.欢迎提出意见,提前谢谢.

我真的不知道如何用言语表达.

当我连续有2个div时,每个都有不同的高度,所以下一行有不需要的空间.

但是在小屏幕中正确堆叠.

 <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12"> div 1 </div>
    <div class="col-lg-6 col-md-6 col-sm-12"> div 2 </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12"> div 3 </div>
    <div class="col-lg-6 col-md-6 col-sm-12"> div 4 </div>
  </div>

但是当我删除行并将所有div放在左边的1 div中,而所有div放在1 div内的右边时,没有空格.

但是它们在小屏幕上的排列顺序错误.

  <div class="col-lg-6 col-md-6 col-sm-12">
    <div> div 1 </div>
    <div> div 3 </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div> div 2 </div>
    <div> div 4 </div>
  </div>

请注意,它们不仅仅是4个div,它们至少是8个.

我希望这很清楚.我感谢任何帮助.

我有一个名为 jobfilter 的元素，我想根据视口宽度向其中添加一个类，即。当我将浏览器的大小调整为 <1000px 时，我想将类 .hidden 添加到 .jobfilter。

现在，我在此链接的帮助下设法让它半途而废：$(window).width() 与 media query 不同。使用这个：

  function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

这是我的 JSFiddle：http : //jsfiddle.net/ck55Lf01/10/。

如果您调整浏览器大小并刷新页面，jobfilter 会隐藏，但我希望动态发生，而不是在页面刷新时，谢谢您的帮助！

我意识到在获得设备尺寸等方面之前已经提出了类似的问题,但是对于确切的方法似乎存在分歧.

假设我有媒体查询(例如Twitter Bootstrap)

超小型设备手机(<768px)

小型设备平板电脑(≥768px)

中型设备台式机(≥992px)

大型设备台式机(≥1200px)

现在,我希望能够使用Javascript基本上获得相同的输出.换句话说,css媒体查询像素数而不是实际的网点.即我不需要得到确切的答案,但我想避免出一个因素或2或3,因为我得到'屏幕点'而不是css像素.

我更关心的是移动设备 - 尤其是Android - 而不是桌面设备.是否screen.width可靠呢？还是jQuery(document).width()？

(这是针对一个研究项目,虽然我知道基本上不可能检测平板电脑与手机,但我想了解人们使用的设备的大小.用户体验不会受到结果的影响.)