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

現(xiàn)在還不能使頁面更具響應(yīng)性； 它是一個相當(dāng)大的Web應(yīng)用程序，需要大量時間進行重構(gòu)。

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

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

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

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

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

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

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

function zoomOutMobile() {

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

if ( viewport ) {

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

viewport.content ="width=1200";

}

}

zoomOutMobile();

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

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

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

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

元數(shù)據(jù)中的視口定義是實時值。更改后，系統(tǒng)將考慮新值并相應(yīng)地修復(fù)渲染。但是，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);

因此，由于我發(fā)現(xiàn)固定比例尺的唯一方法是通過進行不想保留的更改來強制調(diào)整比例尺，因此必須將其重置為原始尺寸。但是中間的更改不會被查看并采取行動(極大的優(yōu)化！)，那么我們?nèi)绾谓鉀Q該問題呢？我使用了setTimeout()函數(shù)：

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

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

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

我發(fā)現(xiàn)的一種邊緣情況是這在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到屏幕并防止?jié)L動。但這不是一個好主意，并且并非在所有地方都能奏效。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。