Question

我是CSS / HTML世界的新手。我正在使用html热点，CSS和bootstrap创建一个交互式图像，以创建有关图像某些部分的模态信息。图像非常宽（它是一个过程路线图），并将在大型触摸屏上用于演示。我遇到的问题是，当打开引导程序模式时，它会出现在浏览器的缩放级别。由于这是一个非常大的图像，用户可以放大和缩小，我需要使模态上的数据在大小/缩放中显示为静态。我使用了视点来保持文本的大小静态，这适用于100 + 60％缩放。什么不能很好地工作，当我缩小文本重叠自己，50％或更少这是可能的，如果人们想要在点击链接打开模态之前看到整个图像。模态上的布局是使用bootstrap的两行三列。列不与文本自身重叠的列重叠。我不确定如何解决这个问题，或者另一种方法可能更好。

我玩过改变图像的大小有助于一些，但在某些时候，无论使用什么图像尺寸，都会使用变化的缩放，从而出现问题。

在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 ****/

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1">应该有助于解决移动扩展问题。

放在<head>和</head>

之间

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

1 个答案: