Question

我试图在jQuery中计算div的高度，然后在后续样式中使用所述高度。我无法在移动Chrome（在所有平台上）上工作，尽管它在桌面浏览器上工作正常。 iOS Safari。

我正在使用这个jQuery：

$('#to-be-styled').css({
    'height' :$('#my-div').height(),
    'overflow' : 'hidden'
});

其中my-div是to-be-styled内的div。

我已尝试$('#my-div').css('height')以及height()变体（例如outerHeight(true)）但未成功。

我应该使用什么功能才能在移动Chrome上运行？

编辑：

使用的HTML：

<div id='to-be-styled'>
    <div id='my-div'>text content</div>
    <div id='something-else'>text content</div>
</div>

my-div未隐藏，除了字体外，没有其他样式。大小

我没有在<head>中设置视口或任何其他响应标签。

Answer 1

如果你想要那么你可以使用媒体查询，jquery不是移动浏览器的好解决方案。

@media screen and (max-width: 300px) {
    #to-be-styled {
        height: 200px;
        overflow: hidden;
    }
}

Answer 2

@Tedfoo-谢谢。将此HTML添加到<head>：

<meta name="viewport" content="width=device-width">

将此添加到CSS可能也会有所帮助：@-ms-viewport{ width: device-width;} source

正如Sunny建议的那样，移动设备上的响应代码的下一步是在CSS中添加媒体查询。但是，如果您正在做一些相当直接的事情，那么将任何固定像素大小更改为百分比，并使用其他可扩展值（例如＆＃39; em＆＃39;设定高度。例如

<div style="width:100%">
This goes across the full width of the page.</div>

或表格：

<tr style="height:2em"> <!-- this row is double the normal line height-->

Viewport将处理您需要的大部分内容。如果问题仍然存在，那么您可以检查以找出检测到的高度值或发生了什么错误吗？

仅针对手机编辑

从您的jquery看起来您希望两个div具有相同的大小，并且在使用移动设备时不显示something-else的内容。要做到这一点，你不需要任何jQuery，只需将其添加到CSS中，将宽度值设置为用于此布局的最大屏幕尺寸。

@media screen and (max-width:450px)
{
  #something-else { 
       display :"none";
 } 
}

使用javascipt进行编辑

如果<div>的高度可以改变，那么用Javascript替换你的Jquery。不需要Jquery，因为加载的HTML可以使用HTML Document（DOM）命令动态编辑，只需要一行代码。

您的to-be-styled ID的名称也是一个问题：使用两次超标导致它失败，因此我在下面的代码中重命名了它。在创建<div>之后，必须包含，例如，在</body>是一个有用的地方之前。代码是：

<head> <title>My Code</title> <meta name="viewport" content="width=device-width"> </head> <body> <div id="to-style"> <div id="my-div">text content</div> <div id='something-else'>something-else text content</div> </div> rest of document <script> document.getElementById("to-style").style.height=document.getElementById('my-div').style.height; </script> </body>

CSS：

#to-style { overflow:hidden; }

副作用＆＃39;同样设置两个高度是my-div将自动尝试将所有文本塞入空间而不是使用溢出。将高度设置为2px，您将看到重叠文本。要解决此问题，您可以通过添加以下代码隐藏something-else div：

document.getElementById("something-else").style.display = "none" ;

或您可以像前面部分一样添加CSS：

@media screen and (max-width:450px) { #something-else { display :none; } }

使用<div>的不同固定初始值进行演示：http://jsfiddle.net/3jk3rg7a/2/

适用于移动版Chrome的Javascript div高度计算

2 个答案: