ipad网站问题 - 内容外形

Question

1当我使用我的Ipad 2查看我的网站时，这些气泡中的文字和数字低于圆圈形状！它在我的macbook中运行正常。但现在看着我刚发现的片段不合适！任何类型的屏幕和设备修复它的任何提示？ - ＆GT; http://www.nausea.ws

＆＃13;

＆＃13;

.statsWrap {
	width: 130px;
	margin-left: 20px;
	margin-right: 20px;
	float: left;
}
.stats {
	display: inline-block;
	position: relative;
	width: 100%;
	transition: all 0.3s ease-in-out 0s;
}
.statDummy {
	margin-top: 100%;
}
.statInfo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #7b133c;
	border-radius: 50%;
	text-align: center;
}
.statNumber {
	font-size: 30px;
	transition: all 0.5s ease-in-out 0s;
	padding-top: 45px;
	margin-bottom: 0;
}
.statNumberMedium {
	font-size: 30px;
	transition: all 0.5s ease-in-out 0s;
	padding-top: 45px;
	margin-bottom: 0;
}
.statNumberSmall {
	font-size: 30px;
	transition: all 0.5s ease-in-out 0s;
	padding-top: 45px;
	margin-bottom: 0;
}
.statNumberTCC {
	font-size: 30px;
	transition: all 0.5s ease-in-out 0s;
	padding-top: 45px;
	margin-bottom: 0;
}
.statText1 {
	transition: all 0.5s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	padding: 0;
	width: 160px;
	margin-top: -25px;
	margin-left: -14px;
}
.statText2 {
	transition: all 0.5s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	padding: 0;
	margin-top: -45px;
	width: 160px;
	text-align: center;
	margin-left: -14px;
	line-height: 24px;
}
.statText3 {
	transition: all 0.5s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	padding: 0;
	width: 160px;
	margin-top: -35px;
	margin-left: -14px;
}
.statText4 {
	transition: all 0.5s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	padding: 0;
	width: 160px;
	line-height: 24px;
	margin-top: -52px;
	margin-left: -14px;
}
.statText5 {
	transition: all 0.5s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	padding: 0;
	width: 160px;
	line-height: 24px;
	margin-top: -70px;
	margin-left: -14px;
}
.stats:hover {
	transform: scale(2);
	z-index: 10;
}
.stats:hover .statNumber {
	transform: scale(.6);
	transform: translateY(-35px);
}
.stats:hover .statNumberTCC {
	transform: scale(.6);
	transform: translateY(-45px);
}
.stats:hover .statText1 {
	transform: scale(.6);
	opacity: 1;
}
.stats:hover .statText2 {
	transform: scale(.6);
	opacity: 1;
}
.stats:hover .statText3 {
	transform: scale(.6);
	opacity: 1;
}
.stats:hover .statText4 {
	transform: scale(.6);
	opacity: 1;
}
.stats:hover .statText5 {
	transform: scale(.6);
	opacity: 1;
}

＆＃13;

  <div class="sixteen columns">
            	<h3 class="sectionTitle">Reconhecimento Acadêmico</h3>
            </div>
            
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber">2011.2</p>
                        <p class="statText1">Prêmio Criatividade</p>
                    </div>
                </div>
            </div>
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber">2012.1</p>
                        <p class="statText1">2ºlugar categoria campanha</p>
                    </div>
                </div>
            </div>
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber">2012.2</p>
                        <p class="statText2">1ºlugar categoria campanha<br>Prêmio Criatividade<br>1ºlugar categoria geral</p>
                    </div>
                </div>
            </div>
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber statNumberMedium">2013.1</p>
                        <p class="statText1">Prêmio Criatividade</p>
                    </div>
                </div>
            </div>
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber">2013.2</p>
                        <p class="statText3">1ºlugar categoria audiovisual<br>1ºlugar voto popular</p>
                    </div>
                </div>
            </div>
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber statNumberSmall">2014.1</p>
                        <p class="statText4">1ºlugar categoria audiovisual<br>2ºlugar categoria campanha<br>1ºlugar categoria voto popular<br>Gran Prix</p>
                    </div>
                </div>
            </div>
            <div class="statsWrap">
            	<div class="stats">
                    <div class="statDummy"></div>
                    <div class="statInfo">
                        <p class="statNumber statNumberTCC">TCC</p>
                        <p class="statText5">Nota máxima pela monografia<br>“Faça-me um HIT: uma análise da integração entre marketing e indústria musical no século XXI”</p>
                    </div>
                </div>
            </div>
  

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试这样做，以避免文本走出圈子并告诉我这是否有效：

.statInfo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #7b133c;
    border-radius: 50%;
    text-align: center;
    overflow: hidden; 
    }

这也是：

  @media only screen and (max-width: 959px) {

      .statNumberMedium, .statNumber {
            font-size: 24px;
            padding-top: 38px;

    }

 }

这肯定会解决问题，如果没有，那么试试这个：

 @media only screen and (max-width: 959px) {

      .statNumberMedium, .statNumber {
            font-size: 24px !important;
            padding-top: 38px !important;

    }

 } 

gif证明它对我有用：