我遇到了一个难以描述的奇怪错误...
当我从localhost服务器提供服务时，HTML5 Canvas应用程序开始表现异常时，我正在使用HTML5 Canvas应用程序。我发现了这一点window.innerWidth，window.innerHeight并突然在Firefox和Chrome中都错误地报告了该错误。在这台计算机上，innerWidth应该为1366，但在Firefox中报告为1525，在Chrome中报告为2048。
我以为这可能是我的javascript中的一个奇怪故障，但是我发现这现在正在影响从localhost某些旧应用程序中查看的所有页面并弄乱了CSS。
奇怪的是，从观看时，一切都按预期工作127.0.0.1。我们还发现，当我的老板从公共Dropbox文件夹提供服务并在Firefox的计算机上查看该应用程序时，他也会查看相同的问题（Chrome可以正常运行）。但是，在该计算机上本地提供服务不会显示任何问题。
这个让我完全难住了。我希望有人对可能的原因或解决问题的方法有所了解，因为我们不能允许使用此应用程序的客户发生这种情况。
编辑：更多数字
window.innerWidth: 2048
window.outerWidth: 1366
screen.width: 1366
window.screen.availWidth: 1366
innerWidth是唯一一个错误的控件，它与页面内容无关，因为即使打开空白文件，这些值也保持不变。
我正在创建工具提示的动态定位,我先在jsfiddle上测试代码然后将我的代码放到我的网站上(在localhost上使用wordpress构建),在jsfiddle我的脚本是可行的但是当我把代码放到我的网站时,它不起作用(不是动态的铬)因为不同的结果$(window).height().你可以检查这个小提琴并尝试鼠标进入一个链接(第一个链接),然后看到登录控制台,窗口高度的结果是wh :667在我的网站窗口高度是wh :12024和wh : 11970(可更改)
jQuery(document).ready(function ($) {
$('a[rel="bookmark"]').mouseenter(function () {
console.log($(window).height());
})
});
也用这个
jQuery(function($){
$(window).ready(function(){
console.log($(window).height());
});
$(window).on('resize', function(){
console.log($(window).height());
});
});
谷歌浏览器
jsfiddle:667
我的网站(wordpress):12024 - 多变的
Mozilla的
jsfiddle:602
我的网站:585
我敢肯定,我添加了严格的doctype.
我找到了这个解释
$(window).height()是显示网站的视口的高度.(不包括工具栏和状态栏以及类似的东西)
$(document).height()是视口中显示的文档高度.如果它高于$(window).height()您获得滚动条滚动文档
我认为在我的网站上的结果$(window).height()是滚动条在chrome上滚动文档(我的网站有一个很长的页面).如果是这样,我怎样才能在我的网站上获得视口的高度,是否有另一种方法可以获得每个浏览器(chrome,mozilla,opera等)视口的相同结果(实际)高度？
注意:我不认为使用,screen.height因为它可以导致屏幕显示(包括浏览器的工具栏)
我在 OS X 上使用 Selenium WebDriver 和 Chrome 驱动程序，在 Python 中实现。
我正在尝试编写一个测试来验证各种 HTML 元素是否完全在屏幕上（例如，我有一个标签云，并且由于我的实施不佳，有时某些词会从浏览器的边缘滑落窗口，所以它们是半可见的）。
driver.find_element_by_css_selector("div.someclass").is_displayed()，这是我可以在其他地方找到的唯一解决方案，似乎不起作用；即使元素部分可见，它也会返回 True 。
有没有办法可以检查整个元素（包括填充等）在标准浏览器视口中是否可见？
我正在用 Python 实现，所以 Python 风格的答案将是最有用的。
我需要这样简单的东西:
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
但不是重定向,我需要<script src="js.js"></script>附加<head></head>
那可能吗？
我的网站结构如下：
<html>
<iframe>
<iframe>
</iframe>
</iframe>
<html>
我正在编写最内在的部分iframe。现在我想确定height浏览器窗口的可用程度（menubar在可能的toolbars下开始并在可能的s之前结束）。
我有IE9并尝试过类似的东西：
window.innerHeight
（结果未定义）和
window.parent.document.body.clientHeight
（不是我预期的高度）。
我如何获得height？提前谢谢。
我正在开展一个项目,我需要在背景图像的特定部分放置视频剪辑(视频应始终位于手机屏幕的顶部).背景是响应并不断变化.如何确保包含视频的视频始终位于相同的相对位置？
CSS:
.main{
background-image: url("../images/moshe.jpg");
background-attachment:fixed;
background-position: center center;
background-size: cover;
height: auto;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
width: auto;
}
.overlay{
position:fixed;
position: absolute;
top: 30%;
left: 30%;
}
HTML:
<!-- video -->
<div class="embed-responsive embed-responsive-16by9 overlay">
<video muted autoplay loop class="embed-responsive-item" width="100">
<source src="images/time.mp4" type=video/mp4>
</video>
</div>
如何检测设备是否仅是平板电脑？下面的这个脚本不能正常工作。
var ua = navigator.userAgent, tablet = /Tablet|iPad/i.test(ua);
alert("Tablet? " + tablet);
我不想检查是否是移动设备并使用else来显示平板电脑。我只想要一个功能来确认是否是平板电脑。我怎样才能做到这一点？谢谢
我需要获取浏览器窗口大小,并在javascript中将窗口大小设置为div大小.
我有2个div元素,如果窗口大小是568px意味着,div1想要38%而div2是62%.在每个尺寸中,两个div都希望保持相同的百分比大小.
我的 Angular 应用程序中有这个浮动按钮，
<button [ngClass]="{
'mdc-fab--extended': extendedClass,
'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>
当屏幕尺寸为 768px 或更低时，我需要将 mdc-fab--extended className 更改为 mdc-fab--mini 吗？我可以做什么来实现这个功能？谢谢
我已经尝试过，但课程没有被删除/添加
if (window.innerWidth < 768) {
this.miniClass = true;
this.extendedClass = false;
} else {
this.miniClass = false;
this.extendedClass = true;
}