标签: viewport
如何检查事件 clientx, clienty 是否存在于 getBoundingClientRect 中？
我有一个来自 mouseup 事件的 xy 对象，我想知道该 xy 是否存在于视口中元素的boundingClientRect 内。我可以从 getBoundingClientRect 方法获取元素的左、右、上、下值。我想知道 xy 是否在元素 rect 内。
推荐指数
解决办法
查看次数
臭名昭著的高度：Android 版 chrome 上的 100% 问题 - 地址栏
我创建了一个有角度的应用程序，其中侧边栏是height: 100%。但是，在 Android 版 Chrome 中查看 Web 应用程序时，滚动文档时：
- chrome地址栏轻轻向上滑动
- 100% 实际尺寸保持不变，直到您 TouchEnd
深灰色侧边栏通常height: calc(100% - 55px)应始终保持顶部栏可见，并始终填充顶部栏和底部之间的剩余空间。
我已经尝试了几种方法来解决这个问题。页脚有bottom: 0，而且事实上这个页脚总是正确呈现的。所以这让我尝试使用top: 55px; bottom: 0而不是height: calc(100% - 55px). top但从您同时设置和 的那一刻起bottom，结果与设置高度相同。
有谁知道如何在地址栏出现/消失时使视口调整其高度？
推荐指数
解决办法
查看次数
精灵位置比视口移动更快
我昨天在XNA中使用视口做了一些事情,并且无法弄清楚为什么我使用的精灵在改变位置时比我的视口移动得更快.我有一种感觉,它可能与不同的值类型(int与float)有关,但是有人会关心这个吗？
这是我使用的代码......
Viewport myViewport;
Texture2D t;
SpriteFont f;
Vector2 point = new Vector2(0, 0);
/// <summary>
/// Allows the game to run logic such as updating the world,
/// checking for collisions, gathering input, and playing audio.
/// </summary>
/// <param name="gameTime">Provides a snapshot of timing values.</param>
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
Keys[] pressedKeys = Keyboard.GetState().GetPressedKeys();
for (int i = 0; i < pressedKeys.Length; i++)
{
if (pressedKeys[i] …推荐指数
解决办法
查看次数
当鼠标离开视口时如何使JQuery .hover()工作？
下面的代码将div放在视图端口的最顶部.
预期的行为是:
当用户将鼠标悬停在div上时,然后向上移动鼠标直到光标离开视口,应在控制台中记录"悬停"消息.问题是没有任何内容记录到控制台.
当鼠标离开视口时,如何让JQuery .hover()将某些内容记录到控制台？
<body style="margin: 0; padding: 0;">
<div class="foo" style="background-color: blue; width: 100px; height: 100px;">
Test
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(".foo").hover(function(){
console.log("hover in");
}, function(){
console.log("hover out");
});
</script>
推荐指数
解决办法
查看次数
如何在Excel工作表中获取当前视口的坐标？
我需要将图表放在Excel工作表的中心，就在用户当前正在查看的位置。显然，0是图纸坐标系统X轴的起点，随着我们向右移动，X会增加。例如，用户可能正在查看列J到Z，并且我需要用户在工作表中查看位置的坐标，因此我可以将图表放在他的前面。
如何获得工作表“视口”相对于工作表坐标系的坐标？还有其他更简单的方法可以将图表放置在那里吗？
谢谢。
推荐指数
解决办法
查看次数
根据jQuery Mobile中的设备/屏幕分辨率更改元视口
我想改变我的视口:
<meta name="viewport" content="user-scalable=no">
至:
<meta name="viewport" content="width=device-width, initial-scale=1">
基于设备屏幕.第一个示例适用于iPad,但在iPhone上我有一个响应式样式表,我想要启动.
我已经尝试过这段代码,我已经从这个问题进行了修改.根据设备分辨率更改视口
// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
// Change viewport for smaller devices
$('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}
推荐指数
解决办法
查看次数
为什么我的网站会在移动设备上切断？
我创建这个网站的初衷是让它成为移动设备.然而,我不得不把这个功能拿出去,暂时只是想拥有它,所以当你在移动设备上访问该网站时,你只能看到你在屏幕上看到的网站.不像你想要的那样移动友好,但缩小了,所以你可以看到整个事情.
我已经放入代码中,使其按照我喜欢的方式运行,但事情正在发生,而且无法正常工作.我已经查看了视频端口的HTML 5垫片和其他选项,但我无法弄明白.
我尝试了一些视口标记的不同变体
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=500, initial-scale=1">
这就是网站现在在移动设备上的样子
这就是我希望它看起来像
你能看到我错过的东西吗？
推荐指数
解决办法
查看次数
通过CSS获取所有可用的视口高度
有一种方法可以在不知道上面元素的高度的情况下迫使div占据所有可用高度？
如果知道高度，则可以使用vh单位，例如，如果height: 100vh - 30px;#header 的高度为30px，则可以将其应用于#view。
我在jsFiddle中做了一个小例子：
<div id="header">
Header
</div>
<div id="view">
View
</div>
#header {
height: 50px;
}
#view {
height: calc(100vh - 50px);
}
推荐指数
解决办法
查看次数
响应式Chrome扩展程序弹出窗口
我正在开发一个chrome扩展名，并且以.psd的形式获得了设计。我有所有图层的px值。设计在1225X2019屏幕上进行，导致我的较小屏幕上的弹出窗口，字体，边距，间距等过大。
在我的css文件中，我使用了从设计中获得的px值，并使用了“ Adobe Assets”。
我不明白为什么“元视口”行不能使它响应。对于间距和边距，我还尝试使用Bootstrap的网格（class =“ col-md-1”），但似乎没有任何效果。
这是我的CSS和HTML代码段：
body {
font-family: 'Source Sans Pro';
width: 738px;
background-color: #eceff1;
}
#Hired_RSS
/*Hired RSS*/
{
padding-left: 46px;
padding-top: 10px;
background-color: #455a64;
color: #ffffff;
height: 77px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 37.5px;
font-weight: 700;
font-style: italic;
letter-spacing: 0.937px;
text-align: left;
}
#toolbar {
background-color: #b0bec5;
width: 738px;
height: 67px;
}
#Feeds {
margin-left: 47px;
margin-right: 50px;
background-color: #b0bec5;
color: #455a64;
font-family: 'Source Sans Pro';
font-size: 31.25px;
font-weight: 300;
font-style: italic;
letter-spacing: 0.781px; …推荐指数
解决办法
查看次数
SFML :: View倒y轴标准？如何解决它？
我使用右手坐标(x =右,y =向上)将我的物体放在世界空间中.
当我必须使用SFML渲染它们时,我遇到了问题,因为我无法在sf :: View中使用(y = up)矩阵设置View矩阵,然后全部渲染y-flipped.
我正在考虑的一个解决方案是在渲染之前在每个对象上翻转y轴:
ObjectTransformMatrix * MatrixScale(1.0f,-1.0f)
但我想我必须将sf :: View中心移动到:
y = y - (view_size.y / 2.0)
为什么sf :: View是y-inverted？我的解决方案是否正确
推荐指数
解决办法
查看次数