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

我是相当新的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

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

回答

相关问题