為什么在Android上需要此代碼的viewport元標記？

Question

更新2-18-03-2017：顯然我需要使用window.devicePixelRatio 。 我還不知道怎么回事。 但這就是我現在需要弄清楚的。

我試圖用window.devicePixelRatio除以300px的CSS大小（每個彩色塊都設置了該高度），但看來我的計算仍然不正確。

更新1-18-03-2017：我認為我已經指出了這個問題：

在使用Chrome（例如Android版）時，最大scrollTop值要比僅使用Chrome（對於台式機）要低得多。 問題必須出在#scrolldistract的paddingTop上。 我需要以這種方式填充該空的div ，以使此高度或填充向Chrome for Android注冊，因為它會增加最大scrollTop值。 現在無論我使用min-height或line-height還是具有一定像素高度的table ，它都保持在540左右。

---

在我的代碼中，我試圖動態獲得一些高度和坐標。 如果我使用HTML代碼注釋中指定的viewport meta標簽，則所有內容都可以在Android版Chrome和Android版Firefox上運行，就像使用Chrome（台式機）一樣。

但是，當我不插入視口元標記時，即使我動態地請求它們，它的測量值也會錯誤（在Android版Chrome和Android Firefox上）。

我知道移動設備上存在虛擬像素之類的東西： https : //developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

但是我不完全理解為什么瀏覽器不返回正確的值（我需要使用的實際值）。 我不太了解自己在這里做錯了什么？

為什么不使用視口元標記？ 因為我要啟用雙擊-由於300毫秒的延遲，這顯然對我很頑皮。 我確實要使用雙擊，因為需要縮放某些文本（以可視形式顯示）。

好吧，當然有捏到縮放手勢，該手勢仍然可以通過視口meta標簽啟用（無論是否有視口meta標簽，它似乎也存在一些問題）。 但是為此目的，兩把水龍頭在某種程度上更合適。

 var $window = $(window); var $document = $(document); // Element which needs to fade in and out. var $fadingblack = $("#fadingblack"); var $scrolldistract = $("#scrolldistract"); var $scrollsviascrolldistract = $("#scrollsviascrolldistract"); // Pulls up the child divs of #scrollsviascrolldistract, under it. var $puller = $("#puller"); // Start of fading area (Y-value). var scrollTopStart = $fadingblack.position().top; // And of course the Y-value of the end of the fading area. var scrollTopEnd = scrollTopStart + $fadingblack.height(); // Maximum scrollTop-value (when scrollbar is at 100%). var lastScrollTop = $document.height() - $window.height(); // Amount of scrolled pixels (vertically) including amount scrolled while // the fading element is fading. var scrollAmountWithFadeAmount = $document.height + $fadingblack.height(); // Setting height does not quite work for an empty div, // so we are using some padding. $scrolldistract.css("paddingTop", scrollAmountWithFadeAmount); // Percentage of which we have scrolled (1 = 100%). var currentScrollTopP; // Current scrollTop value. var realCurY; $(function() { // Off you go code... function doScrollOrFade() { currentScrollTopP = Math.ceil($window.scrollTop() / lastScrollTop * 100) / 100; realCurY = currentScrollTopP * lastScrollTop; if (realCurY >= scrollTopStart && realCurY <= scrollTopEnd) { // Current realCurY dictates we are in fade area. // So scroll the fading area into view at top of browser viewport. $puller.css("marginTop", -scrollTopStart); // Determine opacity percentage. var fadePercent = (realCurY - scrollTopStart) / (scrollTopEnd - scrollTopStart); // Fade to current opacity immediately. $fadingblack.fadeTo(0, fadePercent); } else { // We are outside of the fading area and in scroll-mode. if (realCurY < scrollTopStart) { // We are somewhere before the fading area, so set opacity to 0. $fadingblack.fadeTo(0, 0); } else { // We are somewhere after the fading area, so set opacity to 1. $fadingblack.fadeTo(0, 1); } if (realCurY > scrollTopEnd) { // We have passed the fading area. So we have an amount // of pixels we wasted on the opacity changes. // Correct it here. $puller.css("marginTop", -realCurY + $fadingblack.height()); } else { $puller.css("marginTop", -realCurY); } } window.requestAnimationFrame(doScrollOrFade); } window.requestAnimationFrame(doScrollOrFade); $window.on('resize orientationchange', function(e) { // On resize or orientation change recalculate some stuff. lastScrollTop = $document.height() - $window.height(); scrollAmountWithFadeAmount = $document.height + $fadingblack.height(); $scrolldistract.css("paddingTop", scrollAmountWithFadeAmount); window.requestAnimationFrame(doScrollOrFade); }); }); 

 body { background-color: whitesmoke; } #scrollsviascrolldistract { position: fixed; left: 0px; top: 0px; width: 100%; } #scrolldistract { position: absolute; left: 0px; top: 0px; width: 100%; padding-top: 2100px; height: 0px; } #puller { position: relative; margin-top: 0px; left: 0px; top: 0px; } img { display: block; } .black, .red, .blue { border: solid 1px yellow; font-size: 32pt; position: relative; width: 100%; height: 300px; } .red { background-color: red; } .blue { background-color: blue; } .black { background-color: black; } 

 <!-- For mobile support use viewport meta-tag inside <head>: <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scrolldistract"></div> <div id="scrollsviascrolldistract"> <!-- For pulling up the red, blue and fading area --> <div id="puller"></div> <div class="red">BEGIN</div> <div class="blue">Fading black area is ahead...</div> <div id="fadingblack" class="black">&nbsp;</div> <div class="blue">&nbsp;</div> <div class="red">&nbsp;</div> <div class="blue">END</div> </div> 

Answer 1

視口meta標簽用於將頁面縮放到設備物理尺寸的大小和顯示的寬度； 沒有它，瀏覽器將加載頁面並縮小頁面，使其適合屏幕。 因此，從理論上講，沒有視口的頁面的高度和寬度與桌面相同