草庐IT

javascript - 元视口(viewport)标签选项在 iOS 上不起作用

coder 2024-01-17 原文 

<!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 中打开时，会加载网站的桌面版本。

最佳答案

设置 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 值。

关于javascript - 元视口(viewport)标签选项在 iOS 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44878131/

javascriptviewport34pxwidthhtmliosiframe

有关javascript - 元视口(viewport)标签选项在 iOS 上不起作用的更多相关文章

  1. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  2. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  3. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  4. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  5. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  6. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  7. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  8. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  9. ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用？ - 2

    我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么？describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o

  10. ruby - 为什么不能使用类IO的实例方法noecho？ - 2

    print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案 一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上

随机推荐