Javascript 为什么Android上需要viewport meta标记来编写此代码？

更新2-18-03-2017:显然我需要使用

window.devicePixelRatio

。我还不知道到底是怎么回事。但这就是我现在需要弄清楚的

我试图将

300px

（每个彩色块都设置了该高度）的CSS大小除以

window.devicePixelRatio

，但我的计算结果似乎仍然不正确

更新1-18-03-2017:我想我已经有点指出了问题：

最大

scrollTop

值远低于仅使用Chrome（台式机）时的值，例如使用Android版的Chrome。问题一定出在

#scroll distract

的

paddingTop

中。我需要填充这个空的

div

，以使这个高度或填充在Android的Chrome中注册，因为它增加了最大

scrollTop

值。现在，无论我使用

minheight

或

lineheight

或带有一定像素高度的

表格，它都保持在540左右


在我的代码中，我试图动态地获得一些高度和坐标。如果我使用HTML代码注释中指定的viewport meta标记，那么一切都可以在Android版的Chrome和Android版的Firefox上运行，就像使用Chrome（桌面）一样

但是，当我没有插入视口元标记时，它的测量值是错误的（在Android的Chrome和Android的Firefox上），即使我动态地请求它们

我知道移动设备上存在虚拟像素：

但是我不明白为什么浏览器没有返回正确的值（我需要使用的实际值）。我不太明白我做错了什么

为什么不使用视口元标记？因为我想启用双击-这显然是非常顽皮的我，因为300毫秒的延迟。我真的想使用双击，因为需要缩放一些文本（以视觉形式）

当然，还有“收缩到缩放”的手势，它仍然使用视口元标记启用（无论是否使用视口元标记，它似乎也存在一些问题）。但两个水龙头在某种程度上更适合这种用途


var$window=$（window）；
var$document=$（文档）；
//需要淡入淡出的元素。
var$fadingblack=$（“#fadingblack”）；
变量$ScrollDistrict=$（“#ScrollDistrict”）；
变量$ScrollsViascrollDistrict=$（“#ScrollsViascrollDistrict”）；
//在它下面拉起#ScrollsViascrollDistrict的子分区。
var$puller=$（“#puller”）；
//衰落区域的开始（Y值）。
var scrollTopStart=$fadingblack.position（）.top；
//当然还有衰减区域末端的Y值。
var scrollTopEnd=scrollTopStart+$fadingblack.height（）；
//最大scrollTop值（当scrollbar为100%时）。
var lastScrollTop=$document.height（）-$window.height（）；
//滚动像素的数量（垂直），包括在
//衰落元素正在衰落。
var scrollAmountWithFadeAmount=$document.height+$fadingblack.height（）；
//设置高度对于空div不太有效，
//所以我们使用了一些填充物。
$ScrollDistrict.css（“paddingTop”，scrollAmountWithFadeAmount）；
//我们已滚动的百分比（1=100%）。
var-currentScrollTopP；
//当前滚动上限值。
var-realCurY；
$（函数（）{
//起飞代码。。。
函数doscorlorfade（）{
currentScrollTopP=Math.ceil（$window.scrollTop（）/lastScrollTop*100）/100；
realCurY=currentScrollTopP*lastScrollTop；
if（realCurY>=scrollTopStart&&realCurY scrollTopEnd）{
//我们已经通过了衰落区，所以我们有一个数量
//我们浪费在不透明度更改上的像素数。
//在这里更正它。
$puller.css（“marginTop”，-realCurY+$fadingback.height（））；
}否则{
$puller.css（“marginTop”，-realCurY）；
}
}
window.requestAnimationFrame（doScrollOrFade）；
}
window.requestAnimationFrame（doScrollOrFade）；
$window.on（'resize orientationchange'，函数（e）{
//在调整大小或改变方向时，重新计算一些内容。
lastScrollTop=$document.height（）-$window.height（）；
scrollAmountWithFadeAmount=$document.height+$fadingblack.height（）；
$ScrollDistrict.css（“paddingTop”，scrollAmountWithFadeAmount）；
window.requestAnimationFrame（doScrollOrFade）；
});
});
正文{
背景色：白烟；
}
#卷轴{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
}
#滚动分散注意力{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
填充顶部：2100px；
高度：0px；
}
#拉拔器{
位置：相对位置；
边际上限：0px；
左：0px；
顶部：0px；
}
img{
显示：块；
}
黑色
红色
蓝先生{
边框：实心1px黄色；
字号：32pt；
位置：相对位置；
宽度：100%；
高度：300px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}

开始
前面是褪色的黑色区域。。。
结束
视口元标记用于将页面缩放到设备物理高度和显示器宽度的大小；如果没有它，浏览器将加载页面并缩小页面，使其适合屏幕。因此，理论上，没有视口的页面的高度和宽度与桌面相同