相关疑难解决方法(0)

我有一个输入类型的文本

<input type="text">

基本上我使用javascript ClientRect来获取插入细节.ClientRect看起来像这样

[object ClientRect]
  {
     [functions]: ,
     __proto__: { },
     bottom: 540.7999877929687,
     constructor: { },
     height: 24,
     left: 1034.5399169921875,
     right: 1034.5399169921875,
     top: 516.7999877929687,
     width: 0
  }

这是在每个文本输入上生成的.

left: 1034.5399169921875,
left: 1065.5399169921875,
left: 1078.5399169921875,

我想将此数字转换为CSS单位px/%/rem/vh.这样我就可以把动态css.怎么做？

通过组合一些CSS和Jquery UI/draggable,我创建了平移图像的能力,并且使用一些额外的JS,您现在可以缩放图像.

我遇到的问题是,如果放大图像的左上角是固定的,正如您所期望的那样.我想要的是图像保持中心(基于当前的平移),使图像的中间位于容器的中间,同时变大.

我已经为此编写了一些代码但是没有用,我希望我的数学是错误的.有人可以帮忙吗？

我希望它像这样工作.滚动到图像时,它会根据当前平移保持图像居中,而不是从角落缩小.

HTML:

<div id="creator_container" style="position: relative; width: 300px; height: 400px; overflow: hidden;">
    <img src="/images/test.gif" class="user_image" width="300" style="cursor: move; position: absolute; left: 0; top: 0;">
</div>

使用Javascript:

$("#_popup_creator .user_image").bind('mousewheel', function(event, delta) {
    zoomPercentage += delta;
    $(this).css('width',zoomPercentage+'%');
    $(this).css('height',zoomPercentage+'%');

    var widthOffset = (($(this).width() - $(this).parent().width()) / 2);
    $(this).css('left', $(this).position().left - widthOffset);
});

如何在浏览器窗口中找出视点的宽度和高度？以及如何找出向下和向右滚动多少文档？

可能重复:
iPhone 5 CSS媒体查询

iPhone 5技术规格表明屏幕尺寸为1136×640

我的问题是这个,

对于landscape,如果我使用max-device-width为568px, 请参阅http://www.stephentgilbert.com/mediaqueries/#iPhone

你可以解释一下为什么当iPhone 5网站上说明的尺寸宽度为1136px时才有效

我知道我在这里混淆了一些基本原则.如果您能为我提供正确的解释并将我链接到相关的在线资源,我将不胜感激.

I am trying to solve the problem of using Javascript to determine the width of my browser's "window". I'm aware different people can mean different things in this context so to be specific I mean the area in green as in this post.

I've read the first two replies to that post and a number of other stackoverflow solutions to this problem, none of which I could get to work: I am using Firefox 27.0.1 with the window maximised on …

我正在尝试使用 获取视口高度大小window.innerHeight。但它的返回值似乎是错误的。

我尝试window.outerHeight过并且window.innerHeight。

我也添加了视口元标记。

<meta name="viewport" content="height=device-height; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

console.log("viewport_inner_height: " + window.innerHeight);
console.log("viewport_outer_height: " + window.outerHeight);

结果是：

viewport_inner_height: 2044
viewport_outer_height: 1047

window.outerHeight 似乎是正确的。

如何通过javascript准确获取视口高度？

我有一个垂直长的 SVG 图像，我需要滚动到具有特定 id 的某个特定元素。

const el = document.getElementById(id);
el.scrollIntoView({
  behavior: 'smooth',
  block: 'center'
});

这在 Chrome 中效果很好，但 Firefox 会滚动到 SVG 文件的顶部，而不是所选元素的视图中。

我在 stackblitz 中重现了该错误：

https://stackblitz.com/edit/react-wkoiwq

https://react-wkoiwq.stackblitz.io

在 Chrome 中，#hotplate 元素移动到中心，而在 Firefox 中，SVG 的顶部移动到中心。

尝试更改center, 和start来end查看效果。

有没有办法解决/避免这个问题？

有没有办法用 Javascript 检测 Bootstrap 4 使用的视口/屏幕大小？

当用户调整浏览器大小时，我找不到一种可靠的方法来检测当前的视口。我已经尝试过Bootstrap 工具包，但它似乎与 Bootstrap 4 不兼容。

有人知道另一种方法吗？

我试图把这个小转换成script纯粹的vanilla JS.

普通的JS值未正确计算.

我需要什么才能计算出与jQuery版本相同的值？

请在jQuery小提琴中向下滚动以查看我的意思.

$(document).scroll(function() {
    var progressBar = $('progress'),
        docHeight = $(this).height(),
        winHeight = $(window).height(),
        max = docHeight - winHeight,
        value = $(window).scrollTop();
    progressBar.attr('max', max);
    progressBar.attr('value', value);
});

演示jQuery

在下面,我的纯JS不起作用:

var progressBar = function() {
    var myBar = document.querySelector('progress'),
        docHeight = document.clientHeight,
        winHeight = window.clientHeight,
        max = docHeight - winHeight,
        value = window.scrollY;
    myBar.setAttribute('data-max', myBar.getAttribute('max'));
    myBar.setAttribute('max', max);
    myBar.setAttribute('data-value', myBar.getAttribute('value'));
    myBar.setAttribute('value', value);
};
document.addEventListener('scroll', progressBar);
window.addEventListener('resize', progressBar);

我在香草的尝试

谢谢!!

我有一个div (top navigation)嵌套在flex容器内的。当top-nav展开时，我希望它占据视口的整个高度。我知道这可以通过设置高度来实现，100vh但并未得到广泛支持。所以，我需要一种更传统的方式来实现这一点。

该html和body有一个height 100%，但该视图的内容溢出，我可以滚动页面。

我现在拥有的是：

.top-nav .top-nav-links-wrapper {
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 50px;
    left: 0;
    height: 100%;        
}

有没有办法实现这一点（除了将高度设置为100vh）？

我的网站目前的宽度太高,无法以800x600或更低的分辨率查看.我想要做的是创建某种警告消息,因此当解析度低的人知道该网站将无法正常查看时.最好,我想要一个黄色栏从顶部下拉,就像Internet Explorer一样.

我怎么能通过使用HTML和CSS来做到这一点？如果你不能,请告诉我如何用其他语言做.

谢谢

是否可以将两个div包裹起来就好像它们的一行一样？

<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>

所以,如果顶线全部是"A",而底线都是"B",那么我们会看到它包裹起来

AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB

我正在尝试使用JavaScript,jQuery和css3来实现这一目标.

我正计划为我的网站开发移动版本,我需要考虑所有不同屏幕尺寸的设备.我试图找到一种方法来获得移动设备的房地产宽度相应地鞋,我可以请任何人建议解决这个问题.如果我使用jQuery或PHP获得解决此问题的解决方案,我将非常高兴,因为我正在使用这些来开发我的移动网站.