草庐IT

Viewport

全部标签

javascript - Div 相对于视口(viewport)顶部的位置

我想知道如何在Javascript中获取从div到窗口顶部的像素数(或一般测量值)。我不是在寻找与文档相关的偏移量y,只是在浏览器显示位置的顶部。我在这里尝试了“已回答”的解决方案:Isitpossibletogetthepositionofdivwithinthebrowserviewport?Notwithinthedocument.Withinthewindow,但至少在Safari中,我遇到了一个问题,无论div的实际位置如何,它都会返回相同的数字。感谢您的帮助! 最佳答案 现有答案现已过时。getBoundingClien

javascript - HTML5 Canvas 相机/视口(viewport) - 如何实际操作?

我确定这之前已经解决了1000次:我得到了一个大小为960*560的Canvas和一个大小为5000*3000的房间,其中始终只应绘制960*560,具体取决于玩家所在的位置。玩家应该总是在中间,但是当靠近边界时-那么应该计算最佳View)。玩家可以使用WASD或箭头键完全自由地移动。并且所有物体都应该自己移动-而不是我移动除玩家之外的所有其他东西,以创造玩家移动的错觉。我现在找到了这两个问题:HTML5-Creatingaviewportforcanvas有效,但仅适用于此类游戏,我无法为我重现代码。Changingtheview"center"ofanhtml5canvas似乎更有

javascript - 我可以即时更改移动版 Safari 中的视口(viewport)元标记吗?

我有一个为移动Safari浏览器构建的AJAX应用程序,需要显示不同类型的内容。对于某些内容,我需要user-scalable=1,对于其他内容,我需要user-scalable=0。有没有办法在不刷新页面的情况下修改content属性的值? 最佳答案 我意识到这有点老了,但是,是的,这是可以做到的。一些让您入门的javascript:viewport=document.querySelector("meta[name=viewport]");viewport.setAttribute('content','width=device

javascript - 在 ReactJS 中获取视口(viewport)/窗口高度

我如何在ReactJS中获取视口(viewport)高度?在我使用的普通JavaScript中window.innerHeight()但使用ReactJS,我不确定如何获取此信息。我的理解是ReactDOM.findDomNode()仅适用于创建的组件。但是document或body元素不是这种情况,它们可以给我窗口的高度。 最佳答案 使用钩子(Hook)(React16.8.0+)创建一个useWindowDimensionsHook。import{useState,useEffect}from'react';functionge

android - 视口(viewport)元标记在 iPhone 和 Android 中不起作用

我正在使用以下html代码testtest我的目的是防止用户放大或缩小。上述代码不适用于iPhone和Android。有什么解决办法吗?编辑:如果在Settings>Accessibility>Zoom下将Zoom选择为On,它会出现在iPhone设置中>,那么这将覆盖元标记。Source不知道为什么它会在android中发生。 最佳答案 我使用这个标签来防止在所有移动平台上缩放:使用,而不是; 关于android-视口(viewport)元标记在iPhone和Android中不起作用,

Android——PhoneGap/WebView 忽略视口(viewport)元标记?

我有一个网页,我正尝试使用PhoneGap(它使用设置为“appview”的普通WebView)在我的Android设备上显示(从项目的Assets目录加载),但webview完全忽略了以下:无论我在这一行中设置什么(我已经尝试显式设置缩放、以像素为单位设置宽度/高度等),设备完全忽略它并将网站呈现为非常小并锚定在左上角-屏幕的手角。我可以使用捏合手势放大(即使我在上面的html代码中明确禁用放大),但我希望页面被放大以正确适应加载的设备。这是有趣的一点...如果我将完全相同的网站放在我的网络服务器上并使用我的测试设备上的默认浏览器导航到它,页面会正确加载(缩放到设备的正确大小)。请帮

javascript - Android键盘使用CSS中的单位vh缩小视口(viewport)和元素

我遇到了一个非常奇怪和独特的问题。由于元素的性质,我所有的页面都使用vh和vwCSS单位而不是px。问题:在Android平板电脑上,当您触摸输入字段时,默认键盘会插入视口(viewport),从而导致页面和页面中的所有元素缩小。在ipad上不存在此问题,因为键盘与屏幕重叠并且不插入屏幕。寻找任何解决方案来避免Android键盘不推送浏览器的视口(viewport)并保持原始大小。注意:我剩下的唯一选择是避免键盘插入视口(viewport),我将无法更改CSS单位或使用xml、list。这些是遇到此问题的网页。 最佳答案 我知道这是

Android视口(viewport)设置 "user-scalable=no"打破视口(viewport)的宽度/缩放级别

我正在开发一个宽度为640像素的网络应用程序。在文档中head我设置了因此内容可以很好地显示和水平拉伸(stretch)。这在iOS上完美运行,但在Android中,浏览器会打开放大的网站,因此用户必须双击才能缩小整个页面。当我更改视口(viewport)设置以省略user-scalable标记时:Android浏览器可以很好地调整到640像素-所以它可以工作。然而现在的问题是,由于未设置user-scalable标签,因此用户可以在Android和iOS上放大和缩小。如何在Android上禁止缩放并同时将视口(viewport)宽度设置为640像素? 最佳

android - 使用视口(viewport)元标记缩放适合移动 Web 内容

我试图弄清楚如何利用移动视口(viewport)元标记自动缩放HTML页面的内容以适应WebView。约束:HTML可能有也可能没有固定大小的元素(例如img的固定宽度为640)。换句话说,我不想强​​制内容流动并使用%'s。我不知道webview的大小,我只知道它的纵横比例如,如果我有一个图像(640x100px),我希望图像在webview为300x250时缩小(缩小以适应)。另一方面,如果webview是1280x200,我希望图像放大并填充webview(放大以适应)。看完androiddocs和iOSdocs在视口(viewport)上,这似乎很简单:因为我知道我的内容的宽度

android - 所有移动浏览器的完整网页和禁用缩放视口(viewport)元标记

我希望我的网页全屏显示并在所有移动设备上禁用缩放。带有元标记:我可以在iPhone/iPad上执行此操作,但在Android设备上,网站放大到大约125%。如果我使用标签我得到相反的结果。因此,它适用于Android,但不适用于iPad/iPhone。 最佳答案 不幸的是,每个浏览器都有自己的视口(viewport)元标记实现。不同的组合适用于不同的浏览器。Android2.2:似乎根本不支持视口(viewport)元标记。Android2.3.x/3.x:通过设置user-scalable=no,您也可以自己禁用视口(viewpo