视口是计算机图形中的矩形视图区域,或用于光学组件的术语。它在不同的上下文中有几个定义。视口是屏幕的一个区域,用于显示要显示的总图像的一部分。它也可以是一组共同构成一个布局的区域。
我正在使用 GitHub 页面为我的博客构建一个静态页面,但在将容器横幅正确调整到 Safari 浏览器上 iPhone 视口的高度时遇到了麻烦。 参考这个
我尝试在元标记中使用“user-scalable=no”来禁用缩放我的网页。我测试了一下,网页被放大了。我怎样才能使它成为原来的但仍然禁用缩放?我也尝试过...
我正在使用 Bubble.io 构建应用程序并在 Telegram Web 应用程序中使用它。当我在页面顶部下拉(向上滚动)时,Telegram 将其识别为关闭手势并尝试最小化应用程序窗口。 妈...
Google 地图 - 事件侦听器(`idle`、`projection_changed`)在地图滚动到视图中之前不会触发
我正在一个包含较长内容部分的网页上使用 Google Maps JavaScript API。该地图位于折叠下方,这意味着页面加载时最初不可见。我注意到...
我是 HTML 新手,现在正在尝试学习和整理内容。 我了解了元标记,它是数据的数据。 我了解了为各种类型的设备(即移动设备)使用设备宽度的概念......
我正在尝试为闭路电视摄像机流创建一个页面,该页面在 3x3 网格中显示 9 个流,使用完整的可用宽度和高度,无需滚动。流的分辨率不同,但我...
我正在尝试让 div 覆盖我的整个页面。目前,问题在于它仅覆盖视口的大小(例如 1920x1080px)。 这就是我现在使用的 div 的 CSS...
TL;博士 当在视口小于 980 像素的设备上查看我的网页时,所有内容都变得比应有的小,并且页面本身报告宽度停留在 980 像素。在我的 CSS 中,@m...
我想要一个简单的语句来将变量 bool 设置为 false 或 true。当视口小于 768px 时,isMobile 应设置为 true,而高于此值时,应设置为 false。 我...
我需要以微型方式表示当前视口形状,根据纵横比适合 100% 的包含元素的宽度或高度。我想预览一下 HTML
我正在设计一个无响应的网站,并且在移动视图中遇到问题。我没有设置视口。我认为内容在移动设备上的显示应该与在桌面上显示的相同,只是缩小了。 这是一个
我希望我的 webgl 应用程序视口和画布能够对浏览器窗口大小更改(包括 F11 按钮)做出反应。 IE。我希望画布始终为 100% 宽度和高度,并且我希望视口大小和
svh/lvh 单位在 iPhone 版 Chrome 上无法按预期工作
我有一个英雄部分需要占据视口的整个高度。当我尝试使用新的 svh/lvh 单位时,尺寸调整似乎在桌面和移动设备 Safari 上正常工作。然而,我...
当 Virtual Kbd 打开时,Safari 布局视口与视觉视口相匹配
我使用 我使用 <meta name="viewport" content="interactive-widget=resizes-content, ...> 以便布局视口调整大小与视觉视口相同,以便所有内容都可见,并且当虚拟键盘打开时布局视口不会垂直滚动。这在 Android 上的 Chrome 中效果很好,但在 Safari 上则不然,因为它不受支持。 我已经进行了广泛的搜索和阅读,但到目前为止还找不到在 Safari 上实现此行为的解决方案。有什么建议么?这是我的应用程序 cibu.app - 请参阅 clibu.com 了解更多信息。 您可以尝试使用 visualViewport 代替窗口大小作为解决方法。 https://github.com/skorphil/nextjs-form/issues/13 但是,我也想在 Safari 中找到更好的方法。为什么该死的 safari 不能只使用默认元标记?
我添加了 jQuery Toggle 函数,现在我的 CSS 响应代码已停止工作
我最初在我的主页上的 div 类下有一栏最新新闻 - .latestNews。 不过,我后来决定添加第二页新闻,用户可以使用按钮进行切换...
我一直在玩 SDL2,仍在学习中。当尝试将渲染器的视口居中时,似乎将窗口大小和视口大小之间的差异的一半添加到...
如何在 Android 上使用“viewport-fit=cover”和“maximum-scale=1”而不禁用缩放
我一直在我的网站上使用以下视口元标记: 在我...
使用 hyperref 时如何使超链接导航到 LaTeX 中的图形顶部?
我有一个 LaTeX 文档,其中包含一个图形和对其的引用: 埃金{图} ...
如果您创建一个包含任何内容的基本 HTML 页面并将其添加到: 如果您创建一个包含任何内容的基本 HTML 页面并将其添加到: <meta name="viewport" content="user-scalable=no, width=500px, initial-scale=0.1, minimum-scale=0.1, maximum-scale=10" /> 然后在您的 PC 或 Android 手机上用 Chrome 打开此文件,您将看到内容按预期缩小。 现在在 Capacitor 应用程序中执行相同操作,查看未按比例缩小的内容。 这是为什么呢?为什么缩放在 android 的浏览器中起作用,但在电容器的 WebView 中不起作用? 注意;可以将 initial-scale 设置为更大的值 2 例如,这对浏览器和电容器都有效,这真的很奇怪。 为了完整起见,这是我用于上述图像的整个 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <base href="/" /> <meta name="viewport" content="user-scalable=no, width=500px, initial-scale=0.3, minimum-scale=0.1, maximum-scale=10" /> </head> <body> <div style="width: 500px; background: red">500px wide</div> <div style="width: 100dvw; background: purple">100dvw</div> <div style="width: 200px; background: green">200px wide</div> <div style="width: 100px; background: blue">100px wide</div> <div style="font-size: 10em">HELLO WORLD THIS IS SOME TEXT!</div> </body> </html> 典型!当我发布这个问题时,我偶然发现了答案(在 ChatGPT 的帮助下) 你必须在Java端的WebView上将这两个设置为true: webSettings.setUseWideViewPort(true); webSettings.setLoadWithOverviewMode(true); 我的 MainActivity.java 的完整代码(减去包行)如下所示: import com.getcapacitor.BridgeActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends BridgeActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Grab WebView WebView webView = (WebView) findViewById(R.id.webview); WebSettings webSettings = webView.getSettings(); // The Magic webSettings.setUseWideViewPort(true); webSettings.setLoadWithOverviewMode(true); } } 为此,您必须提供您的 WebView 和 id。编辑 activity_main.xml,使 WebView 标签如下所示: <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> 现在可以了!您可以缩小和放大!