gpt4 book ai didi

jquery - css 媒体 - 屏幕宽度不一致

转载 作者:太空宇宙 更新时间:2023-11-04 13:38:44 30 4
gpt4 key购买 nike

CSS

 html{
overflow-y:scroll;
}

js

function showW(){
var a=($(window).width());
$('#show').html(a);
}

Chrome 中的结果是 1009。 Firefox 中的结果是 1007。为什么?真相是什么?

我尝试用 outerWidth() 替换 width() - 结果是一样的。

@media only screen and (max-width:960px){...  

这在 945px (Chrome)943px - Firefox 上执行。

也许,滚动条是15px (945+15=960)

我的显示设置 (win xp) 是 - 1024x768

有人可以解释这种不一致的地方吗?

我的最终目标是在所有浏览器中,或至少在 Chrome 和 Firefox 中,真正在 960 px(包括滚动条)上执行 css 媒体。

最佳答案

不一致是由于滚动条造成的。

看这个使用媒体查询的例子

http://jsfiddle.net/CU4Q6/

div {
background: green;
width: 300px
}

@media only screen and (max-width:300px){
div {
background: red;
}
}

在滚动条覆盖框后,您可以看到框改变颜色。因此,媒体查询会在滚动条出现时输出带有滚动条的窗口宽度。在 iPad 上,媒体查询的宽度是屏幕尺寸(包括滚动条)。这是有道理的,因为您不希望滚动条出现时宽度发生变化,因为如果发生这种情况,则可能会有媒体查询以非常接近的宽度改变网站 2

如果需要将媒体查询的宽度同步到js。然后,您可以为不可见元素或可见元素(无论什么)添加 css 规则,然后在调整窗口大小时使用 js 检查该 css 属性。

重要的是要注意,人们现在使用各种不同的设备来查看网页,将精确的宽度作为目标并不太重要。

关于jquery - css 媒体 - 屏幕宽度不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22845013/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com