高度在IOS(iPhone)上无法正常工作 [英] Height doesn't properly work on IOS (iphone)

问题描述

我已经在Codepen上创建了此网站.在尝试使其对所有平台都响应时，我遇到了一个问题.似乎有一个div覆盖了整个页面(仅在IOS上)，并且并非所有高度都正常工作(意味着不适合).

I've created this website on codepen. While trying to make it responsive for all platforms I ran into a problem. It appears a single div covers the whole page (only on IOS) and not all heights are working properly (meaning nothing fits).

我已经待了好几天了，仍然不知道为什么所有的高度和规则都不适用于IOS.

I've been at it for days and still have no clue, why all the heights and rules don't apply on IOS.

我试图删除 video-section ，该部分显示了大部分页面，而 eind 部分只是空白.

I've tried removing the video-section which reveals most of the page except the eind section which is just a blank white.

我尝试添加 max-height 确实显示了其他一些内容，但是似乎该页面在 IOS 上无法获得更高的显示因此，我仍然只能使用一个工作空间.同样，这也不是一个合适的解决方案.

I've tried adding max-height which does reveal some of the other content, but it also seems as if the page can't get any taller on IOS so I'm still limited to a space to work with. Also it doesn't seem a proper solution.

我尝试更改位置，但无济于事.

I've tried changing the position but with no avail.

好像高度不能在IOS上正常工作

It just seems as if the heights don't properly work on IOS

有人可以帮我弄清楚为什么会这样吗?

Can anyone help me figure out why this is happening?

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&amp;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>

推荐答案

我找到了答案.

这是一个JS脚本，它可以自动找到窗口的 height 并将该高度设置为给定的类.

It was a JS script that automaticly finds the height of the window and sets that height to a given class.

但是，这还不是全部解决方案.高度更好，并且没有像以前那样对HTML，正文和部分应用 height:100％; 的地方.

But, that wasn't the whole solution. The height's where better, and weren't all over the place as it was before when I applied height:100%; to the html, body and section.

我以每个电话尺寸的最大高度进行了媒体查询，因此它超出了预期的范围.

I made media queries, on the max-height per phone size, so it was expand beyond the intended sections.

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(使用的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;
  }
}

这篇关于高度在IOS(iPhone)上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！