使用js還原瀏覽器的縮放

阿新 • • 發佈：2018-11-25

移動端，使用手機瀏覽器開啟一個網頁，雙指可以進行網頁的縮放，非常方便

1：縮放前
這裡寫圖片描述

2：縮放後
這裡寫圖片描述

3：有沒有一種方法，可以還原到原始狀態呢。
目前發現一種方法，動態修改viewport,head 中增加標籤

 <meta name="viewport" id="view1" content="width=device-width, initial-scale=1, maximum-scale=3.0, user-scalable=yes" />

使用js 指令碼

document.getElementById('view1').setAttribute('content' 
, 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no');

4：完整程式碼塊

<!DOCTYPE html>
<html style="font-size:14px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="view1" content="width=device-width, initial-scale=1, maximum-scale=3.0, user-scalable=yes" 
 />
    <title>網頁縮放</title>
</head>
<body>
<p>網頁縮放</p>
<div style="border: solid 1px;" >
    <input id="btn_restore" type="button" value="恢復" />
    <p>使用雙指進行縮放，點選恢復按鈕，恢復到100% </p>
    <p>
        <img width = '100%' src="http://www.runoob.com/try/demo_source/img_chania.jpg" 
   width="460" height="345">
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>
</div>
<script>
    document.getElementById('btn_restore').addEventListener('click',function(){
        document.getElementById('view1').setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no');

    });
</script>
</body>
</html>

4：相容性與缺陷
目前瀏覽器核心，基本上都是基於谷歌,目前測試的是，相容微信和谷歌瀏覽器。
safari 瀏覽器不相容，暫時還沒有找到完善的解決方案。
另外是還原後，不能再進行縮放了，除非重新整理頁面。

使用js還原瀏覽器的縮放

移動端，使用手機瀏覽器開啟一個網頁，雙指可以進行網頁的縮放，非常方便 1：縮放前 2：縮放後 3：有沒有一種方法，可以還原到原始狀態呢。目前發現一種方法，動態修改viewport,head 中增加標籤 <meta name="viewport" id=

CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法

簡單 fix chrom per 實現瀏覽器 webkit 只需要 div 方法一. 把圖片作為background 有幾個CSS的屬性要提一下：background-size：cover，這個CSS3的屬性作用是把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，背景

js頁面百分比縮放

fontsize resize 百分比 light () chan logs tlist scrip <script> var docEl = document.documentElement, resizeEvt = ‘

瀏覽器縮放圖片的大小

eight 比例技術分享高度 images alt height .com -1 如圖一張圖片，代碼如下在設置了高度後，寬度會隨原比例自動調整。並且無論瀏覽器如何縮放，圖片保持不變。如果不設置高度，那麽圖片大小是自身大小，並且會隨著瀏覽器的縮放在視覺上顯示縮放效

js獲取頁面縮放比例

今天在網上看到一位大神寫的一篇文章，出處記不得了，只是因為我在做專案的時候需要用到所以看了一眼。經理要求我把兩張圖表上下排列（非響應式的）改成可以適配瀏覽器的，剛開始只是想改樣式，看到程式碼才發現原來他是寫在jq裡面的，嘗試這用jq該樣式的時候發現這個canvas是後渲染根本沒有什麼用處，搞了半天沒有用修改

移動端佈局、rem佈局、手淘團隊flexible.js、zoom縮放

記錄我的第一篇部落格學習前端有一段時間，看部落格一直是自己的學習習慣，今天我也來分享一下，從此以後，開始我的部落格之旅（廢話了幾句），下面進入正題：移動端適配，對於我來說，一直是一個頭疼的問題；經過長期的掙扎，終於花了一整塊時間去研究了一下rem佈局；我在網上

JS等比例縮放圖片,限定最大寬度和最大高度

JavaScript //圖片按比例縮放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ //引數(圖片,允許的寬度,允許的高度) var image=new Image(); image.src=ImgD.src

字型隨瀏覽器縮放變化

當瀏覽器進行“Ctrl+/-”操作縮放瀏覽器時導致結構錯亂，那麼可以限定父標籤的高寬，這樣子標籤的字型就會隨之自動進行縮放在移動端可以使用font-size：1em進行控制字型自動縮放；因為em單位就是以百分比進行計算的限定父標籤的高度就可以做到當瀏覽器進行縮放操作時，

網頁的寬高時時隨瀏覽器縮放而縮放

一、寬度和高度設定成百分比，不要設定固定的值。例子如下： <body style=" width:100%; height:100%"> <embed src="http:

d3.js 實現svg 縮放平移旋轉

使用d3.js的時候，可能會需要對生成svg物件進行平移，旋轉，縮放等操作可以使用矩陣變換來進行座標系下的轉化，但是矩陣運算相對複雜。d3提供了相應的svg變換介面。包括： translate() , scale() , rotate() , skewX() , an

jquery easyui dialog不超出父容器以及隨瀏覽器縮放

tag：jquery , easyui, dialog , 縮放 code: <html> <head> <meta http-equiv="Content-type" content="text/html; char

如何讓css背景圖片佔滿全部背景，並且隨著瀏覽器縮放圖片保持長寬不變呢？

雜記（一些CSS的透明，陰影，漸變樣式以及關於瀏覽器縮放的對應操作）

1 box-shadow屬性與text-shadow（IE9+） box-shadow屬效能使框新增一個或多個陰影，格式為： box-shadow: h-shadow v-shadow [blu

D3.js 使用縮放zoom時節點無法拖動，只能整體移動的問題

func blank on() sta blog function targe light event .on("dragstart", function() { d3.event.sourceEvent.stopPropagation();

Js圖片等比例縮放

tail wid display 圖片等比例縮放 nbsp function document fun splay <img src="chargein_cashgift_detail.png" class="img" > function sh

禁止微信內置瀏覽器的字體縮放問題

一個 android tar 解決 undefine -c attach bsp lba 由於微信自帶字體放大功能，因此基於微信的頁面都可以通過微信進行字體放大，但是有些情況下這並不是我們想要的，因為很多移動端頁面的開發都是使用rem作為單位的，當使用微信進行字體

js仿百度地圖拖拽、縮放、添加圖層功能（原創）

ets tle clas 火狐相對 inner tlist posit css 最近項目中完成的需求，仿百度地圖中的功能：要求：1.底層圖可以拖拽、縮放。　　 2.拖拽一個圖標，在底層圖上對應位置添加一個標註點，該標註點位置要隨底層圖移動。　　　3.添加的標註

js實現移動端圖片預覽：手勢縮放，手勢拖動，雙擊放大...

在屏幕上 turn cit format 基礎上 set 邊距點擊點擊事件前言本文將介紹如何通過js實現移動端圖片預覽，包括圖片的預覽模式，手勢縮放，手勢拖動，雙擊放大等基本功能；

前端外掛jquery.singlePageNav.min.js(導航點選選單跳轉與點選縮放選單摺疊按鈕緩衝效果外掛)

Bootstrap導航點選選單跳轉與點選縮放選單摺疊按鈕緩衝效果外掛jquery.singlePageNav.min.js 引入步驟： <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"><

如何設定瀏覽器的固定縮放介面，適應檢視介面

安裝了瀏覽器後，有時候開啟後會看到介面與螢幕不匹配，類似下圖所示，圖中紅色圓圈所標註的是空白部分，這個原因是由於實際顯示字型較小，通過Ctrl+滑鼠滾輪可以進行放大，但是開啟新的介面後，仍然會變小，所以需要採取一個辦法，一勞永逸，不用每次開啟介面後都Ctrl+滑鼠滾輪，以

使用js還原瀏覽器的縮放

相關推薦