个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
非全屏时如何获取全屏(最小用户界面) View 的尺寸？
这是什么screen属性报告:
window.screen.height; // 568 (Thats the screen height)
window.screen.availHeight; // 548 (???; Unknown dimension. Note, that is it not reporting the available space as per the spec.)
window.document.documentElement.clientHeight; // 460 (Thats the window size when not in fullscreen.)
window.innerHeight是 529，这是我在进入全屏模式之前尝试导出的数字。
最佳答案
澄清一下，window.screen.availHeight反射(reflect)浏览器窗口(包括所有工具栏)可以具有的最大高度。如果你看下图，你会发现 548 只是整个浏览器的高度，没有 iOS 菜单栏。所以，availHeight属性不应该显示内容的可用空间，而是整个浏览器。它用于桌面浏览器，通过检查 window.outerHeight 来检测浏览器是否最大化。反对 window.screen.availHeight .
但是关于在进入它之前获得最小的 UI 高度。 spec 中没有标准属性因为它只是 iOS 的行为。 Apple 可以放置一些非标准属性来公开这些信息。但正如我检查过的window和 window.screen对象，没有任何关系。这是目前的可行性。
作为旁注，了解新视口(viewport)大小与 resize 有什么区别？事件并提前知道可能的规模？在 resize 之前可以完成的工作量事件，应该总是最小的，如果布局发生变化，它应该在调整大小之后发生。因此，提前知道这些数字应该没有多大帮助。
考虑用户打开网页并立即开始滚动的这种情况。如果我们之前知道这些数字，那么对于屏幕的初始渲染我们无能为力，因为它不是最小的 UI。无论应该做什么，都必须在用户开始滚动后立即开始。
现在除此之外，还有另一个看起来像最小 ui 的 resize 事件。在 iPad 上，当你有多个标签时，高度会缩小一点，以显示标签。因此，当用户关闭唯一的其他选项卡时，当前页面会变高一点，并且也会触发调整大小事件。但是这个新的高度与最小 UI 的高度不同。这表明这个最小的用户界面只是高度的另一个提升，而不是类似全屏 API 的模式。
因此，如果页面依赖于高度，则需要记住太多可能的更改。硬编码只是一种短期解决方案，总有一天你将无法测试所有这些设备。
但是，我也应该说调整大小事件有一个缺点，它在进入最小用户界面后触发，这可能为时已晚。所以，当高度开始增长时，没有任何事件可以知道。这就是我相信一些自定义流体 UI 可能需要启动动画来更改大小的地方。在这种情况下，要了解此事件的开始，可以对innerHeight 使用间隔检查，它会立即开始更改。
无论如何，如果有必要的用例在任何滚动之前知道数字，我相信它不能通过 CSSOM 获得，但是。
编辑:
检测最小用户界面是另一回事，仍然不需要知道尺寸。使用触摸事件，您可以检测 View 是否已进入最小 UI。
检查 touchstart 中的内部高度, touchmove和 touchend事件可以帮助检测最小的用户界面。天真的方法是在触摸结束时检查innerHeight 是否增加。这适用于大多数情况，但它有一个问题，如果用户在最小 UI 转换的中间停止触摸，我们无法确定我们是否会进入最小 UI。通过 touchmove 检查上次报告的高度可以帮助检查我们是否会恢复到默认 View 。
无论如何，您可以检查下面的代码以了解它是如何工作的。它有错误，可以改进，但你会明白的。我没有把它放在 codepen 上，因为你不能在那里滚动整个页面。
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<style>
div {
position: fixed;
left: 10px;
}
#dd1 {
top: 10px;
}
#dd2 {
top:30px;
}
#dd3 {
top: 50px;
}
</style>
<body>
<div id="dd1">Start: <span id="d1"></span></div>
<div id="dd2">Move: <span id="d2"></span></div>
<div id="dd3">End: <span id="d3"></span></div>
<section style="position:relative;height:3000px;"></section>
<script>
var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
var d3 = document.querySelector("#d3");
var start_height=window.innerHeight;
var cur_height;
var end_height;
var normal_state=true;
var entered_minimal_ui=false;
//window.addEventListener("touchstart", start_handler, false);
window.addEventListener("touchmove", move_handler, false);
window.addEventListener("touchend", end_handler, false);
document.ontouchstart = control_touching;
d1.textContent=start_height;
function move_handler() {
if(cur_height>start_height) {
// we *may* enter the minimal-ui, but it's not final yet
d2.textContent="I detected minimal-ui faster. (Current: "+cur_height+")";
normal_state=false;
}
cur_height=window.innerHeight;
}
function end_handler() {
end_height=window.innerHeight;
if(end_height>start_height && end_height>=cur_height) {
d3.textContent="Hello minimal-ui. (End: "+end_height+")";
normal_state=false;
entered_minimal_ui=true;
}
else if(!entered_minimal_ui) {
d3.textContent="We didn't enter minimal-ui. Reverting.";
normal_state=true;
}
}
function control_touching() {
document.ontouchstart = function(e){
if(normal_state) {
return true;
}
else // just for testing
e.preventDefault();
}
}
</script>
</body>
</html>
关于javascript - 非全屏时如何获取全屏(最小用户界面) View 的窗口大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26801943/
25
4
0
我在尝试从子文件夹调用 View 时遇到一些错误。首先，这东西能用 Route::get('/', function() { return View::make('sample'); }); 但是当我
我有另一个 View 设置，并准备好等待其viewmodel。我的RelayCommand到达我的“当前” View 模型。从当前的 View 模型显示新 View 的最佳方法是什么？ 我一直在阅读，
我有一个 bigquery View ，我想与数据分析师共享，以便他们可以通过 Data Studio 访问其数据。此共享 View 对另一个数据集中的私有(private) View 进行查询，而私
我有 3 个 View ，并希望将它们集成到一个 View 中，以便它们成为这一 View 中的子文件夹。 我怎样才能做到这一点？还是我必须制作一个 View ，然后再次手动添加和配置这些 View
我在沙发数据库中有一些文档，这些文档的字段是不同关联文档的ID数组: { associatedAssets: ["4c67f6241f4a0efb7dc2abc24a004dfe", "270f
我正在开发一个小实用程序 View ，它将嵌入到我们的几个应用程序中。它将位于一个公共(public)图书馆中。 我应该将其作为 ViewModel 以及默认的 View 实现公开，还是作为具有固定
由于我的某些 View 具有相似的功能，因此我希望能够与每个 View 共享相同的 View 模型。我的想法是将 token 传递给viewmodel的构造函数，但这将导致代码中出现许多if和else
我有一个目标 View (蓝色 View 和红色 View 用于左上角位置)。我试图用手指移动这个 View 。如果 View 不旋转，一切都很好。 但当我旋转 View 并移动时，第一次就很好了。但
我收到这个错误， "Attempt to invoke virtual method 'android.view.View android.view.View.getRootView()' on a
我将发布我目前拥有的源代码，然后解释我的问题。 这是我希望过渡发生的窗口 这是关联的 View 模型 public class MainViewModel {
我正在尝试找出我遇到的错误。最初，我的同事只是使用 将 View 添加到 subview 中 [self.view addSubview:someController.view]; 来自当前ViewC
我是 MVVM 的新手，需要一些帮助。 我的应用程序由许多不同的窗口组成，这些窗口显示允许用户编辑业务层中的数据的控件。 目前，每次用户打开这些窗口之一的新实例时，都会从头开始创建一个 ViewMod
我一直在寻找与我类似的问题以找到解决方案，但我真的找不到类似的东西。 我试图使用 asynctask 类从解析中下载帖子数组，在获取帖子后，它应该在我的页面中设置帖子数组，并执行 setAdapter
这个问题在这里已经有了答案: What is local/remote and no-interface view in EJB? (2 个答案) 关闭 9 年前。 我以前理解它的意思是“接口(in
希望这不会太困惑。 我有一个主视图 Controller ( MainView )，在 View 底部有一个堆栈 View ，在堆栈 View 中我有三个 View 。在一个 View 中(我们称之为
我一直在想这个问题，我真的不知道如何正确地将一个 View Controller 管理的 View 添加到另一个 View Controller 的 View 中。 这不起作用，因为 View 没有完
在明显的情况下，我必须将大量文件从一个 View 复制到另一个 View 。要复制的文件名将作为输入给出。有什么想法可以通过脚本实现吗？ 谢谢，日语 最佳答案 最简单的方法是使用 clearfsimp
我正在使用完整日历。这里我的问题是，当单击上一个按钮或下一个按钮单击功能时，如何找到月 View 、周 View 或日 View 格式的完整日历。这里正在调用下一个和上一个按钮的自定义代码。因为使用这
我对这两者感到困惑，并试图找出差异，但没有得到我正在寻找的特定内容。 在哪里使用索引 View 而不是普通 View 。 它们之间的一些重要区别。 最佳答案 关键的区别在于物化 View 很好，物化了
我在一个 xib 中有一个 CustomView，在两个不同的 xib 中有两个不同的 View 。我想在一个 CustomeView 中依次显示这两个 View 。我有一个 NSView 对象，它连
我是一名优秀的程序员,十分优秀！