在我的網絡應用中，我有一些縮略圖，可在單擊時打開一個燈箱。 在移動設備上，縮略圖很小，用戶通常會放大。問題是，單擊播放時，燈箱在可見區域之外(他們必須滾動到燈箱才能觀看視頻)。 是否可以強制移動瀏覽器縮小以使他們可以看到整個頁面？

現在還不能使頁面更具響應性； 它是一個相當大的Web應用程序，需要大量時間進行重構。

也許這可以幫助您？stackoverflow.com/questions/17440196/

我之前看過該帖子，但我認為它不會對我有所幫助。 我指的是移動設備可以執行的捏縮放，而不是使用CSS縮放。 作為替代方案，是否可以檢測瀏覽器的縮放級別？ AFAIK，諸如detect-zoom之類的工具已被較新版本的瀏覽器破壞。

仔細研究許多其他問題，嘗試縮小內容以適合整個頁面。這個問題與我的需求最相關，但沒有答案。我找到了一個類似的問題，盡管有不同的實現方式，但有解決方案，而不是我所需要的。

我想出了這一點，它似乎至少在Android中可以使用。

initial-scale=0.1：真的縮小得很遠。應該顯示整個網站(然后再顯示一些)

width=1200：覆蓋初始比例，將設備寬度設置為1200。

您需要將1200更改為站點的寬度。如果您的網站具有響應能力，那么您可以僅使用initial-scale=1。但是，如果您的網站具有響應能力，則可能一開始就不需要。

function zoomOutMobile() {

var viewport = document.querySelector('meta[name="viewport"]');

if ( viewport ) {

viewport.content ="initial-scale=0.1";

viewport.content ="width=1200";

}

}

zoomOutMobile();

對于我來說，這很好地調整了Android和Windows Phone上的視口的大小。 謝謝！

不錯的腳本！ 非常感謝，可以在所有設備(Android，iPhone，iPad，Windows Phone)上使用！！ (不要忘記將其放在html的末尾)

我猜我遇到了類似的問題，相反，但解決方案肯定是相同的。就我而言，我有一個縮略圖，人們可以單擊該縮略圖，然后打開一個"彈出"窗口，用戶可能會放大該窗口以查看更好的圖像，完成后，我想以1.0的比例返回到正常頁面。

為此，我四處張望，直到我了解發生了什么，然后可以編寫正確的代碼。

元數據中的視口定義是實時值。更改后，系統將考慮新值并相應地修復渲染。但是，GUI會檢測到"更改時"，并且在運行JavaScript代碼時，GUI線程通常被阻止...

考慮到這一點，這意味著這樣做會失敗：

viewport = jQuery("meta[name='viewport']");

original = viewport.attr("content");

force_scale = original +", maximum-scale=1";

viewport.attr("content", force_scale); // IGNORED!

viewport.attr("content", original);

因此，由于我發現固定比例尺的唯一方法是通過進行不想保留的更改來強制調整比例尺，因此必須將其重置為原始尺寸。但是中間的更改不會被查看并采取行動(極大的優化！)，那么我們如何解決該問題呢？我使用了setTimeout()函數：

viewport = jQuery("meta[name='viewport']");

original = viewport.attr("content");

force_scale = original +", maximum-scale=1";

viewport.attr("content", force_scale);

setTimeout(function()

{

viewport.attr("content", original);

}, 100);

在這里，我會睡100毫秒，然后將視口重設為我認為正常的水平。這樣，視口將考慮maximum-scale=1參數，然后超時并刪除該參數。在此過程中，縮放比例又變回了1，還原我的原始文檔(沒有maximum-scale參數)可以按預期工作(即，我可以再次縮放界面)。

警告1：如果原始文件中有一個maximum-scale參數，則可能要替換它，而不是像在我的示例代碼中那樣在末尾附加另一個值。 (即force_scale = original.replace(/maximum-scale=[^,]+/,"maximum-scale=1")會進行替換-但僅在已有maximum-scale時才起作用，因此您可能需要首先檢查以允許出現任何一種情況。)

警告2：我嘗試使用0ms而不是100ms，但是它失敗了。每種瀏覽器的瀏覽器可能有所不同，但是Mozilla系列會立即運行立即超時的計時器代碼，這意味著GUI進程將永遠不會有機會在執行重置視口的功能之前將比例重置為1。我也確實知道一種方法來知道當前的視口值是由GUI處理的...(不幸的是，這是一個hack)。

類似于Radley Sustaire的解決方案，無論何時使用React和

zoomOutMobile = () => {

const viewport = document.querySelector('meta[name="viewport"]');

if ( viewport ) {

viewport.content = 'initial-scale=1';

viewport.content = 'width=device-width';

}

}

在我的渲染器中

this.zoomOutMobile();

我發現的一種邊緣情況是這在Firefox移動瀏覽器上不起作用

var zoomreset = function() {

var viewport = document.querySelector("meta[name='viewport']");

viewport.content ="width=650, maximum-scale=0.635";

setTimeout(function() {

viewport.content ="width=650, maximum-scale=1";

}, 350);

}

setTimeout(zoomreset, 150);

用頁面寬度替換650

這個對我有用

let sw = window.innerWidth;

let bw = $('body').width();

let ratio = sw / bw - 0.01;

$('html').css('zoom', ratio);

$('html').css('overflow-x', 'hidden');

它適合HTML到屏幕并防止滾動。但這不是一個好主意，并且并非在所有地方都能奏效。

總結

以上是生活随笔為你收集整理的java浏览器拖拽_使用Java强制移动浏览器缩小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。