高度在 IOS (iphone) 上无法正常工作
Posted
技术标签:
【中文标题】高度在 IOS (iphone) 上无法正常工作【英文标题】：Height doesn't properly work on IOS (iphone) 【发布时间】：2018-04-30 06:08:01 【问题描述】：我在 codepen 上创建了 this 网站。在尝试使其对所有平台都做出响应时，我遇到了问题。似乎单个 div 覆盖了整个页面（仅在 ios 上），并且并非所有高度都正常工作（意味着什么都不适合）。
我已经搞了好几天了，仍然不知道为什么所有的高度和规则都不适用于IOS。
我已经尝试删除 video-section，它显示了页面的大部分内容，除了 eind 部分，它只是一个空白。
我已尝试添加 max-height，它确实显示了其他一些内容，但似乎页面在 IOS 上无法变得更高，所以我仍然受限于可以使用的空间.而且这似乎不是一个合适的解决方案。
我尝试更改position，但无济于事。
似乎高度在 IOS 上无法正常工作
谁能帮我弄清楚为什么会这样？
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view()
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function()
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position))
$element.addClass('in-view');
else
$element.removeClass('in-view');
);
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
var controller = new ScrollMagic();
var ctrl = new ScrollMagic.Controller(
globalSceneOptions:
triggerHook: 'onLeave'
);
//Enter section-1
new ScrollMagic.Scene(
triggerElement: "#coming-soon",
duration: "100%"
)
.setTween(TweenMax.to("#image-1", 1, top: "0%" ))
.addTo(ctrl);
new ScrollMagic.Scene(
triggerElement: "#coming-soon",
duration: "100%"
)
.setTween(TweenMax.to(".sign-up-banner", 1, top: "0%" ))
.addTo(ctrl);
new ScrollMagic.Scene(
triggerElement: "#coming-soon",
duration: "100%"
)
.setTween(TweenMax.to("#text-1", 1, top: "0%" ))
.addTo(ctrl);
//Leave section-1
new ScrollMagic.Scene(
triggerElement: "#introductie-1",
duration: "100%"
)
.setTween(TweenMax.to("#image-1", 1, top: "40%", opacity:-1 ))
.addTo(ctrl);
new ScrollMagic.Scene(
triggerElement: "#introductie-1",
duration: "100%"
)
.setTween(TweenMax.to("#text-1", 1, top: "-50%", opacity:0 ))
.addTo(ctrl);
//leave seaction-2
new ScrollMagic.Scene(
triggerElement: "#introductie-2",
duration: "100%"
)
.setTween(TweenMax.to("#image-2", 1, top: "-40%", opacity:0 ))
.addTo(ctrl);
new ScrollMagic.Scene(
triggerElement: "#introductie-2",
duration: "100%"
)
.setTween(TweenMax.to("#text-2", 1, top: "-50%", opacity:0 ))
.addTo(ctrl);
new ScrollMagic.Scene(
triggerElement: "#introductie-2",
duration: "100%"
)
.setTween(TweenMax.to("#release", 1, opacity:1 ))
.addTo(ctrl);@import url("https://fonts.googleapis.com/css?family=Raleway:200");
*
font-family: "Raleway", sans-serif;
font-size: 14px;
font-weight: 100 !important;
input
-webkit-appearance: none;
html,
body,
section
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
color: #666;
p,
h1,
h2,
h3,
h4
margin: 0px;
ul
list-style-type: none;
ul li
display: inline-block;
margin: 50px 25px;
ul li .fa
font-size: 5em;
transition: all 1s ease;
a:link
text-decoration: none;
a:visited
text-decoration: none;
a:hover
text-decoration: none;
a:active
text-decoration: none;
a
color: #666;
.desktop-only
display: initial;
.align-center
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
.mobile-only
display: none;
.icon
background-color: antiquewhite;
border-radius: 50%;
width: 150px;
height: 150px;
margin: 20px auto;
.fa-icon
font-size: 5em !important;
padding: 40px;
.nederland-icon
width: 40%;
padding: 40px;
#mc_embed_signup form
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* (x, y) => position */
-ms-transform: translate(-50%, -50%);
/* IE 9 */
-webkit-transform: translate(-50%, -50%);
/* Chrome, Safari, Opera */
padding-left: 0px !important;
.sign-up-banner
z-index: 2;
position: relative;
top: -50%;
color: white;
height: 50%;
background-color: #f3c17e;
.sign-up-banner input::placeholder
color: white;
.sign-up-banner #mc_embed_signup .mc-field-group input
border-bottom: 2px solid #ffffff !important;
.sign-up-banner #mc_embed_signup
background: #fff0;
.sign-up-banner #mc_embed_signup .mc-field-group input
background-color: #ffffff00;
color: white;
.sign-up-banner #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error
background-color: rgba(255, 255, 255, 0);
.video-section
z-index: 3;
overflow: hidden;
position: relative;
top: 0px;
background-color: black;
max-height: 100%;
max-height: 100vh;
.video-section video
width: 100%;
#coming-soon
display: table;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
color: white !important;
z-index: 3;
max-height: 100%;
max-height: 100vh;
.coming-soon h1
font-size: 52px;
.introductie
position: relative;
z-index: 1;
#introductie-1
height: 100%;
#introductie-1 #image-1
overflow: hidden;
width: 25%;
margin: 90px auto;
max-height: 70%;
#introductie-1 .text-container
width: 500px;
margin: 180px auto;
color: #666;
#introductie-1 .text-container h1
font-size: 2em;
margin-bottom: 40px;
#introductie-1 .text-container p
font-size: 1.4em;
#introductie-2
height: 100%;
#introductie-2 h1
font-size: 2em;
margin-bottom: 40px;
#introductie-2 p
font-size: 1.4em;
#introductie-2 .text-container
width: 60%;
text-align: center;
margin: 0 auto;
#introductie-2 #text-2
position: relative;
#introductie-2 #image-2
overflow: hidden;
width: 60%;
margin: 90px auto;
position: relative;
#introductie-2 #image-2 img
width: 100%;
.left,
.right
width: 50%;
.left
float: left;
.right
float: right;
#image-1
position: absolute;
top: -70%;
left: 10%;
#text-1
top: 40%;
right: 10%;
position: absolute;
.center-container
display: table-cell;
vertical-align: middle;
.center
margin-left: auto;
margin-right: auto;
width: 80%;
.center-text
text-align: center;
overflow: hidden;
#eind
position: relative;
#release
opacity: 0;
#disclaimer
position: relative;
left: 48%;
bottom: 10px;
.fa-facebook:hover
color: #3b5998;
.fa-instagram:hover
color: #fbad50;
#eind ul
padding: 0px;
#eind p
margin-bottom: 100px;
.button
background-color: #faebd7 !important;
color: #666 !important;
#mc_embed_signup
width: 40%;
margin: 0 auto;
#mc_embed_signup .mc-field-group input
border: 0px !important;
border-radius: 0px !important;
border-bottom: 2px solid #666666 !important;
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error
border: 0px !important;
border-radius: 0px !important;
border-bottom: 2px solid #e85c41 !important;
#mc_embed_signup_scroll
text-align: center;
textarea:focus,
input:focus
outline: none;
#mc_embed_signup h2
margin-bottom: 10% !important;
.clear
width: 150px;
margin: 0 auto;
margin-top: 5%;
.clear #mc-embedded-subscribe
border-radius: 0px !important;
width: 150px !important;
margin: 0 auto !important;
height: 50px !important;
/*animation element*/
.animation-element
position: relative;
/*bounce up animation for the subject*/
.bounce-up
opacity: 0;
-moz-transition: all 700ms ease-out;
-webkit-transition: all 700ms ease-out;
-o-transition: all 700ms ease-out;
transition: all 700ms ease-out;
-moz-transform: translate3d(0px, 200px, 0px);
-webkit-transform: translate3d(0px, 200px, 0px);
-o-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate3d(0px, 200, 0px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
.bounce-up.in-view
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
@media (max-width: 1440px)
#disclaimer
position: relative;
left: 48%;
bottom: 10px;
@media (max-width: 1024px)
#image-1 img
position: relative;
left: -244px;
@media (max-width: 768px)
.video
margin-top: 30%;
#introductie-1 .text-container
width: 280px;
#image-1-container #image-1
width: 35%;
#mc_embed_signup
width: 60%;
@media (max-width: 430px)
.sign-up-banner
position: sticky;
top: 0px !important;
max-height: 325px;
.desktop-only
display: none;
#disclaimer
left: 42%;
.mobile-only
display: inherit;
.coming-soon h1
font-size: 45px;
.sign-up-banner
height: 60%;
#introductie-1
height: 250%;
#introductie-2
max-height: 500px;
height: 200%;
#release
opacity: 1;
.left,
.right
width: 100%;
#introduction-1-container
height: 100%;
#introductie-1 #image-1
display: none;
#introductie-2 #image-2
display: none;
#introductie-2 .text-container
width: 80%;
text-align: center;
margin: 0 auto;
#introductie-1 .text-container
position: initial;
width: 80%;
margin: 0 auto;
text-align: center;
margin-top: 40px;
#coming-soon h1
font-size: 24px;
#introductie-1 .text-container p
font-size: 1.2em;
#introductie-2 p
font-size: 1.2em;
.video
margin-top: 60%;
.social-media ul
padding: 0px;
#mc_embed_signup
width: 100%;
margin: 0 auto;
#text-1
opacity: 1 !important;
#text-2
position: initial !important;
opacity: 1 !important;
#eind
height: 120%;
max-height: 1000px;
.eind-block
position: relative;
.fa-balance-scale
padding: 40px 34px;
@media (max-width: 320px)
#coming-soon h1
font-size: 24px;
#introductie-1 .text-container p
font-size: 1.2em;
#introductie-2 p
font-size: 1.2em;
.video
margin-top: 60%;
.social-media ul
padding: 0px;
#mc_embed_signup
width: 100%;
margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Volks</title>
<link rel="stylesheet" href="styles/index.processed.css">
<script src="https://use.fontawesome.com/39f17a3ca2.js"></script>
</head>
<body>
<section class="video-section">
<div class="video">
<video loop autoplay id="video-background" muted playsinline>
<source src="http://rapio.nl/videos/teaser.mp4" type="video/mp4">
</video>
</div>
</section>
<section id="coming-soon">
<div class="align-center center-text coming-soon">
<h1 class="">Binnenkort verkrijgbaar.</h1>
</div>
</section>
<section class="sign-up-banner">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://volksphone.us17.list-manage.com/subscribe/post?u=e0b25e148103e039f3ed554d1&id=bbad48d887" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Ontvang een notificatie bij de bekendmaking van onze crowdfundings-campagne.</h2>
<div class="mc-field-group">
<input type="email" placeholder="Emailadres" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e0b25e148103e039f3ed554d1_bbad48d887" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="verzend" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($)
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = "EMAIL";
ftypes[0] = "email";
fnames[1] = "FNAME";
ftypes[1] = "text";
fnames[2] = "LNAME";
ftypes[2] = "text";
fnames[3] = "BIRTHDAY";
ftypes[3] = "birthday";
)(jQuery);
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</section>
<section class="introductie" id="introductie-1">
<div class="container" id="introduction-1-container">
<div class="left" id="image-1-container">
<div class="image-container " id="image-1">
<img src="media/image-1.jpg">
</div>
</div>
<div class="right">
<div class="text-container" id="text-1">
<div class="icon mobile-only"><img class="nederland-icon" src="media/nederland_icoon.png"></div>
<h1>Van Nederlandse Bodem</h1>
<p>Volks is een Amsterdamse startup achter de eerste Nederlandse high-end smartphone. Maak kennis met onze technologie, je zult verrast zijn.</p><br><br>
<div class="icon mobile-only"><i class="fa fa-balance-scale mobile-only fa-icon" aria-hidden="true"></i></div>
<h1>Balans tussen prijs en kwaliteit</h1>
<p class="mobile-only">Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Er is een overvloed aan smartphones. Helaas betaal je nog steeds de hoogste prijs, of iets minder maar ontbreekt goede ondersteuning en kwaliteit. Volks wilt een balans bieden tussen een eerlijke prijs, goede customer support en topkwaliteit.
</p><br><br>
<div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
<h1 class=" mobile-only">En nu voor iedereen</h1>
<p class=" mobile-only">Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop.
</p>
</div>
</div>
</div>
</section>
<section class="introdcutie desktop-only" id="introductie-2">
<div class="text-container" id="text-2">
<div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
<h1>En nu voor iedereen</h1>
<p>Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop.
</p>
</div>
<div class="image-container " id="image-2">
<img src="media/image-2.png">
</div>
</section>
<section id="eind">
<div class="align-center center-text coming-soon eind-block">
<p>Meer info over de datum en technische specificaties volgt binnenkort op onze Facebookpagina.</p>
<h1 class="">Volks<i class="fa fa-copyright" aria-hidden="true" style="font-size:15px;"></i> <br> December 2017</h1>
<div class="social-media">
<ul>
<li>
<a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li>
<a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</section>
<a id="disclaimer" href="disclaimer.html">disclaimer</a>
<!-- ==== scripts ==== -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<!-- ==== CUSTOM JS ==== -->
<script src="scripts/index.js"></script>
</body>
</html>【问题讨论】：
你是如何在 iphone 上测试的？你检查过chrome sim吗？如果您不知道发生了什么，那您为什么认为身高是问题所在？ @Huangism 我在 Iphone 上的 chrome 和 safari 上运行它。我认为这是一个身高问题。因为黑屏是一个section的高度 【参考方案1】：我找到了答案。
这是一个自动查找窗口的height 并将该高度设置为给定类的 JS 脚本。
但是，这并不是全部的解决方案。当我将height:100%; 应用于 html、body 和 section 时，高度比以前更好了。
我对每个手机尺寸的max-height 进行了媒体查询，因此它超出了预期的部分。
https://90c726a539a841eb97f1b7b3f2aaf646.codepen.website
JS解决方案是：
// On document ready set the div height to window
$(document).ready(function()
// Assign a variable for the application being used
var nVer = navigator.appVersion;
// Assign a variable for the device being used
var nAgt = navigator.userAgent;
var nameOffset,verOffset,ix;
// First check to see if the platform is an iPhone or iPod
if(navigator.platform == 'iPhone' || navigator.platform == 'iPod')
// In Safari, the true version is after "Safari"
if ((verOffset=nAgt.indexOf('Safari'))!=-1)
// Set a variable to use later
var mobileSafari = 'Safari';
//===== FULL HEIGHT =====\\
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari')
// Height + 60px
$('.full-height').css('height',(($(window).height()) + 60)+'px');
else
// Else use the default window height
$('.full-height').css('height':(($(window).height()))+'px');
;
);
// On window resize run through the sizing again
$(window).resize(function()
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari')
// Height + 60px
$('.full-height').css('height',(($(window).height()) + 60)+'px');
else
// Else use the default window height
$('.full-height').css('height':(($(window).height()))+'px');
;
/* //===== HALF HEIGHT =====\\
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari')
// Height + 60px
$('.half-height').css('min-height',(($(window).height() /2) + 60)+'px'/2);
else
// Else use the default window height
$('.half-height').css('min-height':(($(window).height()/2) )+'px');
;
// On window resize run through the sizing again
$(window).resize(function()
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari')
// Height + 60px
$('.half-height').css('min-height',(($(window).height()/ 2) + 60)+'px');
else
// Else use the default window height
$('.half-height').css('min-height':(($(window).height()/ 2) )+'px');
;
);
//===== DOUBLE HEIGHT =====\\
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari')
// Height + 60px
$('.half-height').css('min-height',(($(window).height()* 2) + 60)+'px');
else
// Else use the default window height
$('.half-height').css('min-height':(($(window).height()* 2) )+'px');
;
);
// On window resize run through the sizing again
$(window).resize(function()
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari')
// Height + 60px
$('.half-height').css('min-height',(($(window).height()* 2) + 60)+'px');
else
// Else use the default window height
$('.half-height').css('min-height':(($(window).height()* 2) )+'px');
;*/
);
而CSS（used SCSS）解决方案是：
//IPHONE&SAMSUNG PLUS
@media (max-height: 736px)
.full-height
max-height:736px;
.introductie-mobile
height: 1200px !important;
max-height: 1200px;
//IPHONE 6/7/8
@media (max-height: 667px)
.full-height
max-height:667px;
.introductie-mobile
height: 1200px !important;
max-height: 1200px;
//IPHONE %
@media (max-height: 568px)
.full-height
max-height:568px;
.introductie-mobile
height: 1200px !important;
max-height: 1200px;
【讨论】：
【参考方案2】：这不是 IOS 的问题，而是响应能力的问题。您已为每个部分设置了固定高度，因此它在移动设备上相互重叠。
只需将所有section 高度设置为height: 100vh。
和
@media (max-width: 430px)
.introductie
height: 300vh;
overflow: hidden;
它应该可以工作。
【讨论】：
您是否检查过在 ios 设备上将部分的高度更改为100vh 时会发生什么？所有其他部分都会消失。尝试将前 2 个部分设置为 50vh 看看会发生什么。
现在我亲自测试它，它适用于给定的更新代码，请尝试让我知道它是否不适合你。
这不适用于 iOs safari，它不支持 100vh。【参考方案3】：
顶部黑色<div class="video-section"> 的高度在任何 设备（包括iPhone）上是全高。所以身高本身不是问题。
但是，在其他设备上，下一个 <div class="sign-up-banner"> 的位置会动态变化，以便在您向下滚动时以视差效果移动。一旦您完全超过顶部黑色<div class="video-section">，整个第二个<div class="sign-up-banner"> 将完全可见。这是通过javascript 代码完成的。不管出于什么原因，这个javascript 没有在 iPhone 上运行。
在<div id="coming-soon"> 中应用于<form> 的一些CSS 仍然被应用，这让你的div 卡在第一个后面。
您可以使用以下 css 反转它：
.sign-up-banner
position: static;
height: auto;
#mc_embed_signup form
position: static !important;
-ms-transform: none; /* IE 9 */
-webkit-transform: none; /* Chrome, Safari, Opera */
transform: none;
您可以将其包装在媒体查询中，使其仅适用于特定屏幕。让它申请iPhone。
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
//insert your css here
这会将 CSS 应用到 iPhone 4 和 4s。不能保证不适用于其他设备，但css 不能针对特定设备，所以这是我们所拥有的最好的。您可以在https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 看到针对其他设备（包括其他 iPhone 型号）的媒体查询。
【讨论】：
感谢 James 的回复，css-tricks 链接真的很有帮助。我已经尝试过你的建议，但不幸的是它没有奏效。我很确定 IOS 存在高度问题，因为一个部分覆盖了整个页面（在 Iphone 7 上测试）在不同的 Iphone 上可能会有所不同。 @Notorious_Creed 很高兴我至少可以提供一些帮助。我在浏览器中设置了该 CSS，同时在 iPhone simulator 中查看您的代码笔，它解决了问题。我不能确定它是否适用于其他 iPhone。您应该确保在添加 CSS 时它实际上会覆盖以前的 CSS，然后再放弃它。也许您可以将!important 应用于所有内容作为测试。我不确定您所说的“高度问题，因为一个部分覆盖了整个页面”是什么意思，因为黑色手机视频覆盖了任何设备上的整个屏幕。以上是关于高度在 IOS (iphone) 上无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
iOS 6/iPhone 5 上的 UIGlassButton 无法正常工作 [关闭]
iPhone iOS8：从 iOS7.1 sdk 构建并在 8.0 及更高版本的设备上运行时，UIAlertView 倒置旋转无法正常工作