我在一个项目上使用Twitter Bootstrap。除了默认的引导样式外，我还添加了一些自己的引导样式
//My styles
@media (max-width: 767px)
{
//CSS here
}
当viewport的宽度小于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计算的宽度似乎不一样。当$(window).width()返回767时，css计算它的视口宽度为751，因此似乎有16px的不同。
有人知道是什么导致了这个问题吗?我该如何解决这个问题?人们建议不考虑滚动条的宽度，使用$(window). innerwidth() < 751是正确的方法。然而，理想情况下，我想找到一个解决方案，计算滚动条的宽度，这是与我的媒体查询一致(例如，这两个条件都检查值767)。因为不是所有浏览器的滚动条宽度都是16px?
我最近也遇到了同样的问题——同样是Bootstrap 3。
无论是$.width()或$. innerwidth()将为您工作。
我想出的最好的解决方案是专门为BS3量身定制的
是检查.container元素的宽度。
你可能知道.container元素是如何工作的，
它是唯一的元素，将给你当前宽度设置由BS css规则。
它是这样的
bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
console.log("mobile");
else if (bsContainerWidth <= 950)
console.log("small");
else if (bsContainerWidth <= 1170)
console.log("medium");
else
console.log("large");
我做什么;
<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...
然后在任意位置调用width变量。
您需要将getWidth()放在文档主体中，以确保计算滚动条宽度，否则浏览器的滚动条宽度将从getWidth()中减去。
解决方案，总是工作，并与CSS媒体查询同步。
为主体添加一个div
<body>
...
<div class='check-media'></div>
...
</body>
添加样式，并通过进入特定的媒体查询更改它们
.check-media{
display:none;
width:0;
}
@media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
然后在JS中通过输入媒体查询来检查您正在更改的样式
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
所以一般来说，你可以通过输入特定的媒体查询来检查任何正在更改的样式。
这是前面提到的依赖于通过CSS更改内容并通过Javascript读取的方法的替代方法。这种方法不需要窗口。matchMedia或Modernizr。它也不需要额外的HTML元素。它通过使用HTML伪元素来“存储”断点信息:
body:after {
visibility: hidden;
height: 0;
font-size: 0;
}
@media (min-width: 20em) {
body:after {
content: "mobile";
}
}
@media (min-width: 48em) {
body:after {
content: "tablet";
}
}
@media (min-width: 64em) {
body:after {
content: "desktop";
}
}
我以body为例，你可以使用任何HTML元素。您可以在伪元素的内容中添加任何字符串或数字。不一定要“移动”等等。
现在我们可以通过以下方式从Javascript中读取这些信息:
var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');
if (breakpoint === 'mobile') {
doSomething();
}
通过这种方式，我们总是可以确保断点信息是正确的，因为它直接来自CSS，我们不需要通过Javascript来获得正确的屏幕宽度。
Javascript提供了不止一种方法来检查视口宽度。如您所注意到的，innerWidth不包括工具栏宽度，而且工具栏宽度在不同的系统中是不同的。还有outerWidth选项，它将包括工具栏宽度。Mozilla Javascript API声明:
窗口。outerWidth获取浏览器窗口外部的宽度。
它表示包括边栏在内的整个浏览器窗口的宽度
(如果展开)，窗口chrome和窗口调整边框/句柄。
javascript的状态是这样的，我们不能在每个平台上的每个浏览器中都依赖于outerWidth的特定含义。
outerWidth在旧的移动浏览器上没有很好的支持，尽管它在主流桌面浏览器和大多数更新的智能手机浏览器上都得到了支持。
正如ausi所指出的，matchMedia将是一个很好的选择，因为CSS更好地标准化了(matchMedia使用JS读取CSS检测到的视口值)。但是，即使有了公认的标准，弱电的浏览器仍然会忽略它们(在这种情况下，IE < 10，这使得matchMedia至少在XP消失之前不是很有用)。
总之，如果您只针对桌面浏览器和更新的移动浏览器进行开发，那么outerWidth应该能够满足您的需求，但也有一些注意事项。
