添加捏縮放DIV圖像不可伸縮視在移動設備上

考慮以下視窗meta標籤：添加捏縮放DIV圖像不可伸縮視在移動設備上

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />

頁面上的內容是不可擴展和移動響應。有時，我需要在其上疊加一個大圖像，並允許用戶捏縮放該圖像。

#overlay_div { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #dddddd; 
    z-index: 550000; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

<div id="overlay_div"> 
    <img src="largeimage.jpg" width="100%"> 
</div>

目前，我所知道的兩個可能的選擇：

編程方式更改視口元，允許用戶縮放（可以跨瀏覽器的影響，也使內容下面縮放這是不可取的）
使用hammer.js手動處理捏事件並相應地縮放div /圖像（看起來非常複雜，可能會影響兼容性）。

有誰知道這樣做的正確方法，特別是對於跨瀏覽器兼容性？我希望可能有一個簡單的CSS解決方案。

感謝

來源

2014-06-27 wayofthefuture

我希望戴眼鏡的人不會嘗試使用這個頁面，因爲如果他們不能縮放......他們將無法閱讀它。這就是爲什麼它不是推薦的屬性。 –

millikenchemical.com在移動設備上不可擴展，但可以閱讀。根據我的理解，這是網絡發展的方向。移動友好的響應式內容。謝謝。 – wayofthefuture

一般來說，我會去與一個可縮放的版本一樣@Paulie_D建議;所以在你的所有頁面上都使用它：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這裏是Google´s recommendation。

如果您確實沒有其他選擇，我會建議您在同一個瀏覽器標籤頁/窗口中打開圖片，上面顯示meta標記，返回鏈接進行導航。所以原生捏縮放可用。

這是這樣的實現（你需要一個移動用戶代理）的例子：https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg

來源

2014-06-30 12:57:33

嗯......這是一個地圖，這就是爲什麼我禁用了用戶縮放。當你捏地圖變焦。也許我可以使用你的視口元標記啓用縮放，並嘗試刪除會導致地圖div下面的事件...我不知道。謝謝 – wayofthefuture

它是什麼樣的地圖？谷歌地圖？ –

谷歌地圖圖層openlayers ...我試過hammer.js，但我有Windows手機的麻煩。我認爲在這一點上最好的選擇是重定向到一個新頁面，並使用window.location.back（）快速恢復。 – wayofthefuture

我不知道這是你的情況，但通常我更願意做形象（一）原圖像的鏈接。移動瀏覽器可以在full screen模式下處理這種情況。然後用戶可以對圖像做任何他想做的事情或者可以回到主頁面。

來源

2014-07-05 15:32:07 spinus

您可以提供有關此「全屏模式」的任何詳細信息嗎？這是一個JavaScript或CSS的東西？ – MarksCode

@MarksCode，我只是在沒有任何插件/ js代碼的瀏覽器中打開圖片。大多數瀏覽器，特別是手機，可以很好地處理這個問題。 – spinus

啊..太差捏和縮放不適用於此:( – MarksCode

添加捏縮放DIV圖像不可伸縮視在移動設備上

回答

相關問題