[Web/Hybrid App]如何讓Web/Hybrid App支援圖片/頁面縮放

摘要:[Web/Hybrid App]如何讓Web/Hybrid App支援圖片/頁面縮放

一般圖片在HTML當中都用<img src="圖片位置"></img>來呈現

而透過phonegap+jqm/sench的方式這樣的圖片當超過畫面能呈現的大小時往往會呈現爆出畫面的情況,如下圖

我們先將上方<img>改寫為

<img style="width:100%" src="圖片位置"></img>

結果如下:

此時HTML因為沒有設定<meta name="viewport" content="user-scalable=yes"></meta>

所以還是不支援縮放,所以我們將HTML加上上面這段變成以下的格式

<!DOCTYPE html>
<html>
    <head>
    	<meta name="viewport" content="user-scalable=yes"></meta>

如此一來即可在phonegap上面針對圖片進行縮放了

其他viewport 可以設定的屬性分別如下,

width:可設定數值,或者指定為 device-width
height:可設定數值,或者指定為 device-height
initial-scale:第一次進入頁面的初始比例
minimum-scale:允許縮小最小比例
maximum-scale:允許放大最大比例
user-scalable:允許使用者縮放,1 or 0 (yes or no)

這邊在給大家參考摟


如果覺得文章還不錯麻煩請在文章最上面給予推薦,你的支持是小弟繼續努力產出的動力!