Pat*_*tle 180 css jquery media-queries twitter-bootstrap
我在一个项目上使用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？
aus*_*usi 286
如果您不必支持IE9,则可以使用window.matchMedia()(MDN文档).
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
}
window.matchMedia与CSS媒体查询完全一致,浏览器支持非常好:http://caniuse.com/#feat=matchmedia
如果您必须支持更多浏览器,您可以使用Modernizr的mq方法,它支持所有理解CSS中媒体查询的浏览器.
if (Modernizr.mq('(max-width: 767px)')) {
//...
} else {
//...
}
Nat*_*teS 173
检查媒体查询更改的CSS规则.这保证始终有效.
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
HTML:
<body>
...
<div id="mobile-indicator"></div>
</body>
使用Javascript:
function isMobileWidth() {
return $('#mobile-indicator').is(':visible');
}
CSS:
#mobile-indicator {
display: none;
}
@media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}
Roh*_*mar 33
这可能是由于scrollbar,使用innerWidth而不是width像
if($(window).innerWidth() <= 751) {
$("#body-container .main-content").remove()
.insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove()
.insertAfter($("#body-container .left-sidebar"));
}
你也可以得到viewport类似的
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
以上代码来源
Ran*_*iev 10
是的,这是由滚动条引起的.正确答案来源:在此输入链接说明
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
这可能是一种更好的做法,不是JS-scope文档的宽度,而是由css @media查询做出的某种改变.使用此方法,您可以确保JQuery函数和css更改同时发生.
CSS:
#isthin {
display: inline-block;
content: '';
width: 1px;
height: 1px;
overflow: hidden;
}
@media only screen and (max-width: 990px) {
#isthin {
display: none;
}
}
jQuery的:
$(window).ready(function(){
isntMobile = $('#isthin').is(":visible");
...
});
$(window).resize(function(){
isntMobile = $('#isthin').is(":visible");
...
});
| 归档时间： |
|
| 查看次数： |
210714 次 |
| 最近记录： |