2. 程式人生 > >pc頁面按比例縮放嵌入移動頁面顯示

pc頁面按比例縮放嵌入移動頁面顯示

阿新 • • 發佈：2019-02-09

專案有個需求，需要在客戶端的webview中嵌入一個外部html。由於該html是從pc平臺過來的，沒有相容移動平臺，所以要把頁面縮放到移動裝置的頁面裡。

一開始使用了：http://blog.csdn.net/hu_shengyang/article/details/7381230

  1. jsp頁面實現引入其他頁面的三種方式如下所示：  
  1. <%@ page language="java"pageEncoding="GBK"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.     <title>jsp1</title>
  7. </head>
  8. <bodystyle="background-color:pink">
  9.     <formaction="">
  10.     <h1>下面顯示的是自定義標籤中的內容</h1>
  11.     <br><br>
  12.     <br>
  13.     <spanstyle="background-color: rgb(255, 255, 255);"><!-- 第一種：jstl import -->
    </span>
  14.     <divstyle="color:red;">
  15.         <c:importurl="inlayingJsp.jsp"></c:import>
  16.     </div>
  17.     <spanstyle="background-color: rgb(255, 255, 255);"><!-- 第二種：jsp include指令 --></span>
  18.     <div>
  19.         <%@ include file="inlayingJsp.jsp" %>
  20.     </
    div>
  21.     <spanstyle="background-color: rgb(255, 255, 255);"><!-- 第三種：jsp include動作 --></span>
  22.     <div>
  23.         <jsp:includepage="inlayingJsp.jsp"flush="true"/>
  24.         <!-- 傳入引數時用 <jsp:param name="parameterName" value="{parameterValue | EL表示式 }" /> -->
  25.     </div>
  26.     </form>
  27. </body>
  28. </html>

的<%@ include file="inlayingJsp.jsp" %> 但是會有頁面顯示不全的問題

後來使用iframe 上文的第三種方式，再參考http://www.cnblogs.com/Nbge/archive/2013/06/14/3135697.html 

<iframe src="index.html" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()"></iframe>
<script type="text/javascript" language="javascript">   function iFrameHeight() {   var ifm= document.getElementById("iframepage");   var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; ifm.width = subWeb.body.scrollWidth; }   }   </script>

，用js動態設定iframe的大小，還有

http://blog.163.com/[email protected]/blog/static/141551715201332194420647/

//獲取瀏覽器名稱

function getbrowser(){ var userAgent = navigator.userAgent;//取得瀏覽器的userAgent字串 var isOpera = userAgent.indexOf("Opera")>-1;

if(isOpera){return"Opera"};//判斷是否Opera瀏覽器 if(userAgent.indexOf("Firefox")>-1){return"FF";}//判斷是否Firefox瀏覽器 if(userAgent.indexOf("Safari")>-1){return"Safari";}//判斷是否Safari瀏覽器 if(userAgent.indexOf("compatible")>-1&& userAgent.indexOf("MSIE")>-1&&!isOpera){return"IE";}; //判斷是否IE瀏覽器 }

//進行縮放

//el 要縮放的dom物件

//xSacle x方向縮放的大小

//yScale y方向縮放的大小

function zoomEle(el, xScale, yScale) { var name = getbrowser();   style = el.getAttribute('style')||""; if(name=="IE"){ if(document.compatMode =="CSS1Compat"){//模式匹配 解決ie8下相容模式    el.style.width = el.clientWidth *2.0;    el.style.height = el.clientHeight *2.0; }   el.style.zoom = xScale; }elseif(name=="FF"){   el.style.transform ='scale('+ xScale +', '+ yScale +')';   el.style.transformOrigin ='0px 0px'; }else{   el.setAttribute('style', style +'-webkit-transform: scale('+ xScale +', '+  yScale +'); -webkit-transform-origin: 0px 0px;'); } }

<body onload="zoomEle(document.getElementById('f1'),0.8,0.8);" style="overflow-x:hidden;"> <div style="width:1201px;height:801px;border:1px solid #ccc;"><iframe src="iframe.html" width="1500" height="1000" id="f1" scrolling="no"></iframe></div> </body>

html程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <scripttype="text/javascript"> function st(){ var  dd = document.getElementById('d1');   dd.innerText="W:"+dd.clientWidth+",H:"+dd.clientWidth; } </script> <bodyonload="st();"> <divid="d1"style="width:1500px;height:1000px;text-align:center;"> </div>

</body> </html>


設定 被嵌入頁面的縮放。總的原理是設定iframe的width為pc的尺寸，我是1200px，這樣肯定頁面是正常顯示（pc端的效果），然後再縮放，就可以得到想要的效果。一開始是先設定了iframe尺寸為移動裝置的尺寸，這時渲染的頁面已經變形，再縮放也沒意義了，後面靈機一動有了前面的想法。結果喜人，特此為記。


相關推薦

pc頁面按比例縮放嵌入移動頁面顯示

專案有個需求，需要在客戶端的webview中嵌入一個外部html。由於該html是從pc平臺過來的，沒有相容移動平臺，所以要把頁面縮放到移動裝置的頁面裡。 一開始使用了：http://blog.csdn.net/hu_shengyang/article/details/73

【移動端元素按比例縮放】用Padding-buttom撐開高度

 1、在說容器按比例縮放前，我們先說下圖片按比例縮放。 對於圖片，預設只設置圖片的一個寬或高，那麼另一個值就會按照圖片真實比例縮放。 圖片因為本身存在寬高比，所以設定一個值，另一個值自動也就根據真實的比例對應上，但是如果是視訊、div元素等元素則沒有這個屬性。 一般在響

6、js控制，設定圖片跟隨視窗（主要是根據高度變化）大小變化，按比例縮放

html： <div class="container"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545633786675&a

Android imageView圖片按比例縮放

android:scaleType可控制圖片的縮放方式，示例程式碼如下： <ImageViewandroid:id="@+id/img"     android:src="@drawable/logo"     android:scaleType="ce

按比例縮放的geoserver組合樣式編寫

在編寫地圖樣式的時候可以根據地圖資料的某個屬性決定要顯示的圖示樣式，根據地圖比例尺決定地圖圖示的大小。但是如何既根據屬性顯示圖示樣式同時又根據比例尺決定圖示大小呢？ 正常的邏輯肯定是雙層for迴圈的思路，即兩層<rule>。但是用這種方式geoserver會報錯

Fresco按比例縮放圖片

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/story_image" android:layout_width="fill_parent" android:layout_height="wr

iOS 圖片處理方法（按比例縮放,指定寬度按比例縮放)

今天遇見的處理圖片的問題，一張圖片上下兩個部分都有一個空白區域，就中間是圖片。要求是不能讓他顯示上下    有空白問間距。這是測試提出來的問題，但是圖片本身就是這個毛病。無奈，哥哥改。誰有好的方法推薦推薦推薦      啊!!!    兩個方法如下    建議讓這兩個

css 網站大背景（按比例縮放背景圖片）

很多網站是全背景圖片的，而且適應各種主流解析度，給人一種乾淨大氣的感覺，實屬設計派的一個耍酷良方，下面介紹幾種實現全屏圖片自適應縮放背景圖片的方法。 1.帥氣簡單的CSS3方法 html { background: url(images/bg.

Android 設定ImageView寬度固定，其高度按比例縮放適應

今天和專案經理對噴了一下，他說在應用的列表資料中的圖片應該寬度固定，高度按比例縮放自適應，我說，那豈不是很醜！直接讓運營那邊把圖片處理成固定寬高比不就好了，省的我客戶端麻煩了。 這傢伙不同意，為毛呢，因為我們公司的圖片尼瑪全部是從別的網站上蕩過來的，幾萬張圖片，本身不知道

python批量按比例縮放圖片

把指令碼檔案放在要縮放的資料夾下面。 雙擊執行指令碼,輸入要縮放的係數。指令碼會在當前目錄下建立一個scaledImg_xxxx資料夾,如果已經存在，會強制刪除，如果刪除失敗會提示手動刪除這個資料夾，再雙擊執行就可以了。 resizeImg.py #!/usr/bin/p

圖片寬度為控制元件寬度，高度按比例縮放

圖片寬度固定，高度按比例縮放自適應 本身不知道圖片寬度和高度  首先，定義ImageView，在該ImageView中，我們需要設定屬性android:adjustViewBounds="t

android背景圖按比例縮放方法

直接在你的layout檔案的開頭加一個FrameLayout ，裡面放一個ImageView，因為只有android:src可以設定android:scaleType，android:background是無法設定的，我的程式碼： <?xml version="1.0

vue實現圖片按比例縮放問題

getImg(src){ var img_url =src var img = new Image() img.src=img_url this.pictureHeight.height = Math.ceil(img.height/img.width *

淺談Android根據螢幕寬度，按比例縮放圖片

mageView有scaleType屬性可以縮放圖片，讓圖片鋪滿螢幕寬度，但是會出現壓縮或裁剪的情況。 ImageView的scaleType的屬性分別是matrix（預設）、center、centerCrop、centerInside、fitCenter、fitEnd、f

QT 使用qimage按比例縮放，畫在qlabel

bool CZSPage::DrawRight(QImage *img) {qDebug("%s::%d::%s", __FILE__, __LINE__,__FUNCDNAME__);ui.ZS_R

ImageView圖片寬度為控制元件寬度，高度按比例縮放

寫在前面：本篇文章使用了非同步圖片載入庫Android-Universal-Image-Loader，如果你的專案不使用此庫，本文提供的方法就不能解決你的問題了。 需求說明：顯示多張圖片，每張圖片大小不定，要求圖片顯示寬度為ImageView的寬度，高度按比例縮放，能

在一定範圍裡，按比例縮放圖片，優化展示效果

在listview中，每個條目有一張圖片，圖片的大小是隨機的，怎麼展示才能美觀。很多人用的方法是，在ImageView中，加屬性 android:adjustViewBounds="true" android:maxHeight="300d

【移動端佈局】讓圖片保持等比例縮放 （實用）

原文出處：https://www.aliyun.com/jiaocheng/639739.html 摘要： 前端寫頁面佈局時,圖片變形是個很令人頭疼的問題,手機螢幕解析度不一樣,出來的效果就不一樣,下面的程式碼可以解決這些問題,保持圖片在不同解析度下面也可以讓圖片不變形 1、首先不

[Xcode10 實際操作]六、媒體與動畫-(1)使用圖形上下文按一定比例縮放圖片

本文將演示如何通過圖形上下文，來實現圖片縮放的功能. 在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】 1 import UIKit 2 3 class ViewController: UIViewController { 4 5 o

關於網頁隨手機比例縮放的問題。。。 移動前端開發之viewport的深入理解

在做適配手機版時，chrome調到手機版，但是還是顯示PC端的樣式，無法展現出手機端的樣式； 開始的時候還以為是chrome版本的問題，搜尋chrome版本無果； 想了下，按照道理chrome版本越新，功能應該更好用才是。 聯網搜尋並檢視一些手機版網頁的原始碼，發現很多大網站的手機版都有如下一句話：