javascript - 如何计算ACTUAL innerWidth/innerHeight？

我正在使用Bootstrap写一个响应式网站，我只想要一个元素，它是屏幕的实际大小。

每当我执行高度/宽度：100％时，浏览器就会给我一个滚动条，因为它可以将视口显示为屏幕的完整尺寸（即不包括底部的工具栏/其他浏览器选项卡/ Windows任务栏）。如何计算除这些以外的尺寸？从其他答案来看，这是innerWidth（）和innerHeight（）应该做什么？但这对我不起作用...（见下文）

我正在构建的网站上没有太多内容（基本上只是一个视频轮播），我不希望用户全屏显示（我在视频下方还有其他几个功能），他们不应该也不必滚动。

我的全屏尺寸为1920x940，这是我运行时返回的内容：

$(document).ready(function() {
    alert("Inner Height: " + $(document).innerHeight());
    alert("Inner Width: " + $(document).innerWidth());
}

（并且$（window）给出相同的尺寸。）

这是问题的屏幕截图：



这是我的代码：

<div id="videoModal">
    <div class="modal-dialog" role="listbox">
        <!--<div class="modal-header">-->
        <!--</div>-->
        <div class="modal-body">
            <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->


                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item" ng-class="{active: !$index}" ng-repeat="video in videos">
                        <video id="{{video.videoId}}" controls>
                                <source src="{{video.webmUrl}}" type="video/webm"/>
                                <source src="{{video.mp4Url}}" type="video/mp4"/>
                                <!--<source src="{{video.ogvUrl}}" type="video/ogg"/>-->
                            </video>
                            <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                                <span class="icon-prev" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                                <span class="icon-next" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

而我的CSS：

#videoModal {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
    }

任何帮助将不胜感激，这里显然缺少一些基本的东西...！提前致谢。

最佳答案

如果我正确理解了您的问题，我认为在VH文件中使用VW和CSS单位将是最佳做法。

例如，您可以执行以下操作：

.element {
    width: 100vw;
    height: 100vh;
    background: red;
}

关于javascript - 如何计算ACTUAL innerWidth/innerHeight？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39856186/