Html 防止使用bootsrap在缩放时重新调整大小

我对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 ****/

应该有助于解决移动缩放问题

---

放置在和之间

是否可以创建一个工作小提琴？是否尝试过viewport meta标记？类似于我删除了图像地图，因为我正在使用的图像无法发布。这将阻止所有缩放操作，对吗？我不确定OP的目的是什么。我不能一起消除缩放，因为触发模式的主图像需要缩放。也许在禁用缩放的模式下使用新页面可能会起作用？@isherwood-此元标记仅在用户可缩放属性设置为falseFair足够时才阻止缩放。请在你的回答中描述它到底有什么帮助。