Question

如果我有一个iframe，打开网址http://www.google.com，它会加载整个网页，除非有一个移动样式表，就像在桌面浏览器上一样，带有滚动条。如何将其打开，就像在智能手机上查看一样？

<iframe id="frame" src="http://www.google.com" width="320" height="480"></iframe>

Answer 1

在iframe中加载页面时，网站无法指示浏览器伪装成移动浏览器。

您需要框架中的页面可以在不同的URI下访问，该URI默认提供移动内容和样式表，而不是使用任何类型的检测（无论是媒体查询，用户代理嗅探还是其他任何内容））。

Answer 2

您将第三方网站加载的唯一方式就是在浏览器本身发送相应的用户代理字符串时，就像它在iframe中的移动浏览器中一样。这不是您作为网站开发人员可以控制的。

但是，如果您可以请求页面内容服务器端，那么您将发出http请求并可以控制您向其他服务器发送的用户代理字符串。在.Net中，您可以创建一个新的HttpWebRequest对象，并在发出请求之前设置UserAgentString。

请记住，这实际上是“欺骗”其他服务器返回适用于某些平台的内容。当您回复客户的请求时，您还将从服务器呈现其他人的内容。请务必检查您正在处理的任何网站内容的任何服务条款，以确保它不是问题。

Answer 3

好的..但是建议回应不是那么真实...... 有可能将网站视为iframe中的智能手机..当然，网站必须采用响应式设计方法准备..但它可能

遵循以下3个步骤：在步骤＃2 css代码中编辑IFrame的大小和边框。

1。）创建页面到框架创建一个名为“framepage.htm”的新网页，其响应式设计容量（我的简单博客为例）将显示在IFrame窗口内。 2.）添加IFrame嵌入代码选择并复制以下代码。将其粘贴到您希望显示IFrame窗口的HTML网页的内容区域中。

<iframe name="Framename" src="http://mlaynessanchez.blogspot.com" width="400" height="200" frameborder="0" scrolling="auto" class="frame-area">
</iframe>

3.）添加CSS代码在模板全局样式.css文件的底部选择，复制和粘贴以下css。 css的高度和宽度将覆盖IFrame HTML代码。使用高度，宽度，边框和溢出选项编辑以下内容。

以下代码适用于响应式和非响应式网页。

.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 400px;
  height: 300px;
  overflow: auto;  /* EDIT TO hidden FOR NO SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }

如果您没有全局css文件，请将以上代码添加到网页的head部分，就在以下标记之间的标记之前。

<style type="text/css">
  /* css code goes here */
</style>

来源：http://allwebco-templates.com/support/S_script_IFrame.htm

使网站显示在iframe中，就好像它在智能手机上一样？

3 个答案: