我在一个项目上使用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？
如何使用jQuery获取没有滚动条的浏览器视口的高度和宽度？
这是我到目前为止所尝试的:
var viewportWidth = $("body").innerWidth();
var viewportHeight = $("body").innerHeight();
此解决方案不考虑浏览器滚动条.
如标题中所述,是否可以vw仅在css中计算没有滚动条的情况？
例如,我的屏幕宽度为1920px.vw回来1920px,太好了.但我的实际身体宽度只是像1903px.
有没有办法让我1903px只用css 检索值(不仅是直接的孩子body),还是我绝对需要JavaScript呢？
如何使用Javascript和滚动条帐户检测用户窗口的宽度？(我需要滚动条内屏幕的宽度).这是我的...它似乎在多个浏览器中工作...除了它不考虑滚动条..
function browserWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && document.body.clientWidth ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
有任何想法吗？我需要它在所有浏览器中工作;)
有没有办法可靠地告诉浏览器的视口宽度,包括滚动条,而不是浏览器窗口的其余部分)？
这里列出的所有属性都没有告诉我屏幕的宽度包括滚动条(如果有的话)
好吧,我觉得这很简单,但事实并非如此.我想我只是在我的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: ' …给定一个包含滚动条的div(例如溢出的b/c:auto),如何获得元素的准确innerWidth？在我的例子中:http://jsfiddle.net/forgetcolor/2J7NJ/ width和innerWidth报告相同的宽度.我想要的数字应该少于100.
HTML:
<div id='box1'>
<div id='box2'>
</div>
</div>
<p id="w"></p>
<p id="iw"></p>?
CSS:
#box1 {
width:100px;
height:100px;
overflow:auto;
}
#box2 {
width:200px;
height:200px;
background-color:#aaa;
}
使用Javascript:
$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());?
更新:
当box2 div包含一个大图像时,我需要这个工作(因此需要一秒钟加载).这是一个例子,集成了以下解决方案之一(Lukx'),这不起作用:http://jsfiddle.net/forgetcolor/rZSCg/1/.任何想法如何让它在计算宽度之前等待图像加载？
该页面包含两个元素:
一个<aside>向左.
A <main>在右边.
(注意:在本文中,为了完整起见,提到了高度,但与产生此问题无关.)
所有高度,宽度和边距都是相对于var w = screen.width/100;(和var h = screen.height/100;)设置的,因此页面在任何显示分辨率上看起来基本相同.它们被设置为宽度为<aside>和<main>,以及它们之间的边距加起来screen.width.
例如:
var w = screen.width/100;
document.getElementsByTagName('main')[0].style.width = 85.5*w + "px";
document.getElementsByTagName('aside')[0].style.width = 14*w + "px";
document.getElementsByTagName('aside')[0].style.marginRight = 0.5*w + "px";
(85.5 + 14 + 0.5 = 100)
由于未知原因,这些<main>被压低了<aside>.我只能想到一个半合理的假设来解释这种行为.
但是,如果我将主体的字体大小设置为0并缩小(以便元素占用更少的空间)并放大,则会得到修复(我不知道为什么,也不要问我是怎么找到的这个).
这种行为的原因是什么,什么是正确的解决方案？
浏览器似乎认为"如果我显示滚动条会发生什么情况,即使它们不需要？" ,然后注意到滚动条的宽度> 0,这意味着,
<aside>和<main>比可用正在更多的空间(因为它们被设置为占用屏幕宽度的100%,并且现在有一个滚动条的空间的竞争).因此浏览器决定重新定位<main>下面的<aside>并破坏设计.
而现在,因为<main>是在 …
jQuery的.width()方法似乎没有考虑到滚动条.这对我来说是有问题的,因为我想将一些孩子的宽度设置为等于父母的宽度.我使用类似于以下的jQuery:
$('#contentDiv').width($('#containerDiv').width())
在这个例子中,#contentDiv是我想要调整大小的元素,我想将它设置为宽度为#containerDiv,即它的父元素.我的问题是,这#contentDiv就像这个小提琴一样,切断了一面.
在我的实际代码中,我有几个元素,我正在使用jQuery调整,它们都需要适合可滚动的div,所以只需将css设置#contentDiv为100%就不是一个选项.在jQuery中处理div的滚动条宽度的最佳方法是什么？