【问题标题】:Responsiveness of website not working in iphone 10 or in any iOS网站的响应性在 iphone 10 或任何 iOS 中不起作用
【发布时间】:2018-05-23 10:20:13
【问题描述】:

我在 iframe 中使用以下代码进行网站重定向,它的响应能力在 iPhone 移动设备中的 Safari 浏览器以外的所有浏览器中都非常好。我在不同型号的 iphone 上对其进行了测试。

<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<frameset rows="100%,*" border="0">
<frame src="https://website.com/customer?id=104" frameborder="0" />
<frame frameborder="0" noresize />
</frameset>

当网站在任何浏览器中加载时,它会将网站重定向到我的网站并为不同的屏幕正确打开它。 但是当网站在iOS手机中打开时,它没有响应。显示奇怪的网站布局。


我用下面的代码用 iframe 替换了框架集,但同样的问题仍然存在。

   <head>
   <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
   body, html
        {
            margin: 0; padding: 0; height: 100%; overflow: hidden;
        }

        #content
        {
            position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
        }
</style>
</head>
<body>
<div id="content">
<iframe  width="100%" height="100%" frameborder="0"         
src="https://website.com/customer?id=104">
</iframe>
 </div>
</body>

【问题讨论】:

  • Frameset 已弃用,您不应该使用它:caniuse.com/#search=frameset
  • 我应该用什么来代替框架集?
  • iframe 可以完成这项工作
  • 好的,谢谢,让我检查一下。
  • 我用 iframe 替换它,但仍然出现同样的问题。我编辑了问题并放置了新代码,请参阅。

标签: html ios css iphone bootstrap-4


【解决方案1】:

Frameset是obsolete and deprecated,加上HTML5不支持,可能Safari会忽略它,如果你想在你的网页中显示另一个网页你可以使用iframe

您可以在 w3schools 示例中查看如何使用它们:

iframe {
  width: 1px;
  min-width: 100%;
  *width: 100%;
}
<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

HTML elements - Frames 有更多信息,正如我们所读到的,iframe 是目前 HTML5 中唯一有效的。

【讨论】:

  • 我用 iframe 替换它,但仍然出现同样的问题。我编辑了问题并放置了新代码,请参阅。
  • 我添加了一些 CSS 使其全宽。
  • 您正在添加 width:1px 和 width:100%,它们应该存在,两者都应该存在。
  • 我刚刚用这个 css 检查了它。但问题没有解决。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-05-01
  • 1970-01-01
  • 2018-02-14
  • 2017-03-19
  • 1970-01-01
  • 2022-06-30
  • 2013-12-30
相关资源
最近更新 更多