viewport 相关问题

我使用我使用 <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 不能只使用默认元标记？

safari viewport virtual-keyboard layout-viewport

回答 1 投票 0

我添加了 jQuery Toggle 函数，现在我的 CSS 响应代码已停止工作

我最初在我的主页上的 div 类下有一栏最新新闻 - .latestNews。不过，我后来决定添加第二页新闻，用户可以使用按钮进行切换...

html jquery css mobile viewport

回答 1 投票 0

SDL2/C++：我对在 SDL2 中将视口居中感到困惑

我一直在玩 SDL2，仍在学习中。当尝试将渲染器的视口居中时，似乎将窗口大小和视口大小之间的差异的一半添加到...

c++ window sdl viewport centering

回答 1 投票 0

如何在 Android 上使用“viewport-fit=cover”和“maximum-scale=1”而不禁用缩放

我一直在我的网站上使用以下视口元标记：在我...

android iphone viewport meta-tags pinchzoom

回答 1 投票 0

使用 hyperref 时如何使超链接导航到 LaTeX 中的图形顶部？

我有一个 LaTeX 文档，其中包含一个图形和对其的引用：埃金{图} ...

latex viewport captions figures

回答 0 投票 0

Android 上的电容器无法使用视口“缩小”页面

如果您创建一个包含任何内容的基本 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" /> 现在可以了！您可以缩小和放大！

android html viewport

回答 1 投票 0

IntersectionObserver 是否认为视口内但被另一个 div 覆盖的 div 可见？

我在使用 Intersection Observer 时遇到问题，但不知道问题出在哪里。所以我很好奇有一个问题：让我们想象一下 2 个 div A 和 B A 和 B 均为 100vw x 100vh（完整

javascript viewport intersection-observer

回答 1 投票 0

在 JS 中在任何视口上将剪辑路径插入正方形

您好，这是一个显示我的问题的代码笔我正在尝试进行 JS 计算来更改 div 的剪辑路径插入，以便它显示一个正方形。有一个限制：正方形宽度有 t...

javascript geometry viewport clip-path calc

回答 1 投票 0

当键盘显示时使用 jquery 调整窗口 Safari 的大小

首先，我知道关于这个话题有很多问题。我现在已经搜索了几个星期，但找不到适合我的答案。我有一个网站，上面有一个...