Question

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fox News</title>
  <link rel="icon" href="https://s2.googleusercontent.com/s2/favicons?domain_url=http://foxnews.com" type="image/gif" sizes="16x16">
  <style>
    body {
      margin: auto;
    }
    
    .iframe-container {
      position: relative;
      height: 100%;
    }
    
    .iframe-container iframe,
    .iframe-container object,
    .iframe-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      margin: 0px;
      border: 0;
    }
    
    .social-magnet {
      position: fixed;
      left: 10px;
      font-family: 'Source Sans Pro', sans-serif;
    }
    
    .clx_iframe {
      position: absolute;
      display: block;
      bottom: 30px;
      left: 5%;
      width: 100%;
      height: 100px;
      font-family: sans-serif;
    }
    
    .socialbar {
      width: 87px;
      height: 87px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border: none;
      pointer-events: fill;
      box-shadow: none;
      z-index: 101;
      position: absolute;
      top: 35%;
      left: 147px;
      border-radius: 50% !important;
    }
    
    .profilePhoto {
      width: 87px;
      height: 87px;
      border-radius: 50%;
      border: 3px dashed lightgray;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      object-fit: contain;
    }
    
    .messageContainer {
      width: 390px;
      height: auto;
      line-height: 18px;
      padding: 10px 15px 10px 15px;
      font-size: 16px;
      border: 2px solid white;
      border-radius: 5px;
      position: absolute;
      text-align: center;
      color: black;
      background-color: white;
      text-shadow: none;
      pointer-events: fill;
      box-shadow: none;
      opacity: 1;
      z-index: 100;
    }
    
    .circle-div {
      background: #4C4E60;
      height: 20px;
      border-radius: 50% !important;
      width: 20px;
      float: right;
      position: relative;
      top: -20px;
      right: -25px;
      color: white;
    }
    
    #minimizeToggle {
      color: white;
      opacity: 0.75;
      cursor: pointer;
      font-weight: bolder;
      font-size: 13px;
      text-decoration: none;
    }
    
    #logosocial {
      float: right;
      text-decoration: none;
      padding-right: 2.5px;
      padding-left: 2.5px;
    }
    
    .logoImage {
      width: 46px;
      height: 20px;
      margin-top: -5px;
      background-repeat: no-repeat;
      background-size: 100%;
      opacity: 0.6;
      position: relative;
      right: -25px;
    }
    
    #profileName {
      width: 77%;
      line-height: 20px;
      font-size: 15px;
      padding-bottom: 3px;
      text-align: left;
      color: rgb(34, 34, 34);
      display: block;
      opacity: 0.6;
      overflow: hidden;
      white-space: nowrap;
      text-decoration: none;
      font-weight: bold;
    }
    
    #message {
      height: 36px;
      margin-top: 4px;
      display: table;
      text-align: left;
      overflow: hidden;
      width: auto;
      letter-spacing: 0.5px;
      color: rgb(34, 34, 34);
    }
    
    #messageText {
      height: auto;
      width: 100%;
      display: table-cell;
      vertical-align: middle;
      font-weight: 400;
      font-size: 14px;
      color: rgb(34, 34, 34);
      word-wrap: break-word;
      word-break: break-all;
    }
    
    #formButton {
      float: right;
      margin-left: 15px;
      cursor: pointer;
      color: rgb(255, 255, 255);
      background-color: #4C4E60;
      width: 90%;
    }
    
    .triangle {
      box-sizing: border-box;
      background: white;
      box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
    }
    
    .triangle::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      margin-left: -0.5em;
      bottom: -2em;
      left: 45%;
      box-sizing: border-box;
      border: 1em solid black;
      border-color: transparent transparent white white;
      transform-origin: 0 0;
      transform: rotate(-45deg);
      box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
    }
    
    .buttonCTA {
      height: 36px;
      width: auto;
      display: table-cell;
      padding: 0 15px 0 15px;
      margin: 0 0 0 15px;
      border-radius: 5px;
      border: 3px solid #4C4E60;
      line-height: 35px;
      font-weight: 400 !important;
      text-decoration: none;
      text-align: center;
    }
    /* Media Queiries */
    
    @media screen and (max-width: 359px) and (min-width: 320px) {
      .messageContainer {
        width: 300px;
      }
      .socialbar {
        left: 107px;
      }
    }
    
    @media screen and (max-width: 374px) and (min-width: 360px) {
      .messageContainer {
        width: 340px;
      }
      .socialbar {
        left: 125px;
      }
    }
    
    @media screen and (max-width: 413px) and (min-width: 375px) {
      .messageContainer {
        width: 355px;
      }
      .socialbar {
        left: 133px;
      }
    }
  </style>
</head>

<body>
  <div id="iframeWrapper" class="iframe-container">
    <iframe id="website_frame" class="iframe" src="https://foxnews.com" sandbox='allow-forms allow-scripts allow-same-origin' allowfullscreen></iframe>
    <div class="social-magnet">
      <div class="messageContainer triangle">
        <div class="circle-div"><a id="minimizeToggle" href="http://foxnews.com">x</a></div>
        <a id="logosocial" href="https://clickx.io?utm_source=http://www.clickx.io&utm_campaign=contact&utm_medium=offerwidget" target="_blank">
          <div class="logoImage"></div>
          <a id="profileName" href="http://foxnews.com" target="_blank">Kannan Devan</a>
        </a>
        <span id="message">
          <span id="messageText" class="text-left">
            Good evening. Spent the Evening with a cup of TEA
          </span>
        </span>
        <a class="buttonCTA" id="formButton" href="http://foxnews.com" target="_blank">
          Hello Guys
        </a>
      </div>
      <span class="socialbar">
        <a id="imageLink" href="http://foxnews.com" target="_blank">
          <img id="image_src" class="profilePhoto" src='https://ffb2efd5105ff0aedbc9-9cdacdeebf0faa19b665bf427f0c8092.ssl.cf1.rackcdn.com/assets/new-creator/plus-icon4.png' alt="Brand Logo">
        </a>
      </span>
    </div>
  </div>
  <script type="text/javascript" charset="utf-8">
    var wrapper = document.getElementsByClassName('social-magnet')[0];
    var image_wrapper = document.getElementsByClassName('socialbar')[0];
    var height = document.getElementsByClassName('messageContainer')[0].offsetHeight;
    wrapper.style.bottom = (height + 132).toString() + 'px';
    image_wrapper.style.marginTop = (height + 40).toString() + 'px';
  </script>
</body>

</html>

我尝试使用iFrame在纯HTML页面中加载网站。

在桌面中打开时，将打开该网站的桌面版本。此外，在Android手机中打开时，会加载移动版本，这是预期的行为。

但问题是，在iPhone中打开时，会加载网站的桌面版本。

Answer 1

设置iFrame属性scrolling='no'使其看起来像是在iOS上正确加载的网站的移动版本。

  var ifrm = document.createElement("iframe");
  ifrm.setAttribute("src", "<%= @social_snip.url %>");
  ifrm.id = 'ContentFrame';
  ifrm.scrolling = 'yes';
  if (check) {
    document.getElementById('iframeWrapper').className += ' mobile-theme';
  }
  var IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if(IOS) {
    ifrm.scrolling = 'no';
  }

以上代码检查操作系统是否为iOS，如果是，则会将iFrame的scrolling属性设置为no。

Meta Viewport标签选项在iOS上不起作用

1 个答案: