为什么设置边距会在台式机和移动设备上产生两个不同的值？

Question

我有一组div，应该彼此垂直隔开窗口高度加上一个额外的空间（+ 100px）。但是，在jQuery中设置此边距时，移动浏览器和台式机浏览器的边距是不同的，将附加的+ 100视为字符串而不是数字。

我的代码

$(".text-container").css("margin", "50px auto " + (window.innerHeight + 100) + "px auto")

DESKTOP 上的结果保证金（（Chrome）

alert((window.innerHeight + 100) + ", " + typeof (window.innerHeight + 100) + ", " + $(".text-container").css("margin")) 

--> 740, number, 50px 18px 740px

移动 上的结果保证金（（Chrome和Samsung Internet）

alert((window.innerHeight + 100) + ", " + typeof (window.innerHeight + 100) + ", " + $(".text-container").css("margin")) 

--> 874, number, 50px 20.6094px 740100px 20.5938px

我在这里想念什么？

Answer 1

嗯-这对我来说很奇怪。我将在.css()外部，变量内部创建偏移量，然后从.css()内部调用偏移量。

尝试一下：

var add_margin = window.innerHeight + 100;
$(".text-container").css("margin", "50px auto "+add_margin+"px auto");

应该可以。

当数字被解释为字符串而不是浮点数（或整数）时，我通常会做什么，请尝试使用parseInt()或parseFloat()函数来告诉浏览器变量包含什么类型的数据。