我在一个项目上使用Twitter Bootstrap.除了默认的bootstrap样式,我还添加了一些自己的样式
//My styles
@media (max-width: 767px)
{
//CSS here
}
当视口的宽度小于767px时,我也使用jQuery来更改页面上某些元素的顺序.
$(document).load($(window).bind("resize", checkPosition));
function checkPosition()
{
if($(window).width() < 767)
{
$("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
}
}
我遇到的问题是$(window).width()由CSS计算的宽度和CSS计算的宽度似乎不相同.当$(window).width()返回767时,css计算出视口宽度为751,因此似乎有16px不同.
有谁知道造成这种情况的原因以及如何解决问题？人们已经建议不考虑滚动条的宽度,使用$(window).innerWidth() < 751是要走的路.但理想情况下,我想找到一个计算滚动条宽度的解决方案,这与我的媒体查询一致(例如,两个条件都在检查值767).因为当然并非所有浏览器的滚动条宽度都是16px？
我很困惑,仍然不确定如何用恰当的话来解释这一点.到目前为止,我已经使用Breakpoint设置了我的媒体查询.使用的断点变量看起来像例如:
$menustatictofixed: min-width 900px;
$ breakpoint-to-ems设置为true.我根据以下jQuery代码段的像素值布置了包含所有Breakpoint变量的页面:
$('body').append('<div style="position: fixed; bottom: 0; right: 0; display: inline-block; font-weight: bold; padding: 5px 7px; border-radius: 5px 0 0 0; background: green; color: white; z-index: 9999;">Viewport width <span id="width"></span> px</div>');
var viewportWidth = $(window).width()
$('#width').text(viewportWidth);
$(window).resize(function() {
var viewportWidth = $(window).width();
$('#width').text(viewportWidth);
});
一切看起来都很干净.但是在过去的一两天里,我遇到了为模式设置最后断点并让事情表现出可预测性的问题.在某种程度上,首先看起来干净整洁的东西,我现在在逻辑上非常怀疑,实际上是不合适的,不知何故是一团糟.Cuz,如果你看一下下面的截图,窗口的宽度(在Chrome中)与使用window.width的jQuery代码段的宽度不同.如果我用window.innerWidth替换window.width来最终排除滚动条也没有区别.获得正确结果的唯一方法是在等式中添加15个像素:
var viewportWidth = $(window).width() + 15;
整个方程中唯一的问题是window.width是错误的函数选择,最好是使用例如document.documentElement.clientWidth或其他东西或......？对于15个像素代表什么,以一点点hacky方式修复了上面的问题？最好的问候拉尔夫
如果我使用document.documentElement,任何跨浏览器问题？
目标浏览器是
Thanx提前.
好吧,我觉得这很简单,但事实并非如此.我想我只是在我的HTML/CSS中弄乱了一些东西,但是这里有.
我有一个像这样的基本页面:
HTML
<!DOCTYPE html>
<html>
<head>
<link href='test2.css' rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="test2.js"></script>
</head>
<body>
<div id="scroll"></div>
</body>
</html>
test2.css
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
#scroll {
height: 100%;
width: 100%;
overflow: scroll;
background-color: black;
}
test2.js
$(document).ready(function() {
// my resolution is 1440x900
alert('innerwidth should be 1425');
// all of these return 1440
alert('body innerwidth: ' + $('body').innerWidth());
alert('document width: ' + $(document).width());
alert('window width: ' …