防止重新縮放使用靴子縮放

我是相當新的CSS/HTML世界。我使用html熱點，CSS和引導程序創建交互式圖像，以創建有關圖像某些部分的模態信息。該圖像非常廣泛（其過程路線圖），並將用於僅用於演示文稿的大型觸摸屏上。我遇到的問題是，當引導模式打開時，它會出現在瀏覽器的縮放級別。由於這是一個非常大的圖像，用戶可以放大和縮小，因此我需要使模式中的數據在大小/縮放中顯示爲靜態。我已經使用視點來保持文本的大小靜態，並且適用於100％ - 60％的縮放。如果人們希望在點擊鏈接打開模式之前看到整個圖像，那麼，當我縮小文本重疊本身時，效果不佳的是50％或更少，這是可能的。模態上的佈局是使用引導程序的兩列三列。這些列與文本自身覆蓋的文本不重疊。我不知道如何解決這個問題，或者也許另一種方法更好。防止重新縮放使用靴子縮放

我已經改變了可以幫助某些圖像的尺寸，但是在某些情況下，無論使用何種圖像尺寸，都會使用不同的縮放，因此會出現問題。

它在45％的縮放是做什麼的，文字大小是確定的，但它的重疊：

我需要它看起來像在任何縮放：

CSS情態內容： /****開始，詳情型號內容部分****/

.details, .details-2 { 
    padding-bottom: 80px; 
} 

.details { 
    text-align: center; 
    min-height: 100px; 
} 
.details h4{ 
    font-size: 2.5vmin; 
    color: #666; 
    font-weight: 300; 
    font-family: 'Oswald', sans-serif; 
} 

.details-2 h4{ 
    font-size: 2.5vmin; 
    color: #444; 
    padding-bottom: 10px; 
    font-weight: 300; 
    font-family: 'Oswald', sans-serif; 
} 

.details p, .details-2 p { 
    color: #444; 
    font-size: 2vmin; 
    line-height: 20px; 
    font-weight: 300; 
} 


.details i { 
    font-size:3.5em; 
    color:#fff; 
    background: #FF432E; 
    width: 100px; 
    height: 100px; 
    padding:25px; 
    margin-bottom: 10px; 
    -webkit-border-radius:70%; 
    -moz-border-radius:70%; 
    -o-border-radius:70%; 
    border-radius:70%; 
    position: relative; 
    box-shadow: 0 0 0 30px transparent; 
    -webkit-transform: translate3d(2, 2, 2); 
    -moz-transform: translate3d(2, 2, 2); 
    -o-transform: translate3d(2, 2, 2); 
    transform: translate3d(2, 2, 2); 
    -webkit-transition: box-shadow .6s ease-in-out; 
    -moz-transition: box-shadow .6s ease-in-out; 
    -o-transition: box-shadow .6s ease-in-out; 
    transition: box-shadow .6s ease-in-out; 
} 
.no-touch .details:hover i, 
    .no-touch .details:active i, 
    .no-touch .details:focus i { 

     -webkit-transition: box-shadow .4s ease-in-out; 
     -moz-transition: box-shadow .4s ease-in-out; 
     -o-transition: box-shadow .4s ease-in-out; 
     transition: box-shadow .4s ease-in-out; 
     box-shadow: 0 0 0 0 #FF432E; 
} 


.details-2 i { 
    color:#FF432E; 
    font-size:3em; 
    padding:1px 10px 0 1px; 
    position: relative; 

} 

.container { 
    width: 96%; 
    height: 96%; 
} 



/**** End details Modal Content Section ****/

來源

2015-10-19 Hope

之間

地方，你可以請創建一個工作小提琴？ –

你有沒有試過* viewport * meta標籤？類似[this]（http://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari/4389976#4389976） – JCOC611

http://jsfiddle.net/Hope62/5c7f4rq1 /我刪除了圖像地圖，因爲我正在使用的圖像無法發佈。 – Hope

<meta name="viewport" content="width=device-width, initial-scale=1">應有助於在移動結垢問題。在<head>和</head>

來源

2015-10-19 17:57:07 baconck

這將阻止所有縮放操作，對吧？我不確定這是OP的結果。 – isherwood

作爲模態被觸發的主圖像需要縮放，我無法一起放大縮小。也許在禁用縮放的模式下使用新頁面可能會工作？ – Hope

@isherwood - 此meta標籤只有在將'user-scalable'屬性設置爲'false'時纔會防止縮放。 – Simplicity

防止重新縮放使用靴子縮放

回答

相關問題