Question

我使用UIWebView在我的应用中加载网页，我希望将页面呈现为与PC浏览器完全相同的布局，而不需要任何响应＆＃34;效果。

问题中的特定页面是通过将MS Word中的表格复制到ckeditor来生成的。该页面的完整源代码如下所示（对于页面中的一些中文字符，对不起;它们与问题的性质无关）：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="//cdn.ckeditor.com/4.5.10/full/contents.css">
    <title>My Page</title>
  </head>
  <body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders">
    <table border="1" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td>
            <p align="center">时间</p>
          </td>
          <td>
            <p align="center">体温</p>
          </td>
          <td>
            <p align="center">症状</p>
          </td>
          <td>
            <p align="center">WBC</p>
          </td>
          <td>
            <p align="center">N%</p>
          </td>
          <td>
            <p align="center">TB</p>
          </td>
          <td>
            <p align="center">DB</p>
          </td>
          <td>
            <p align="center">ALB</p>
          </td>
          <td>
            <p align="center">ALT</p>
          </td>
          <td>
            <p align="center">AST</p>
          </td>
          <td>
            <p align="center">PT</p>
          </td>
          <td>
            <p align="center">h-CRP</p>
          </td>
          <td>
            <p align="center">PCT</p>
          </td>
        </tr>
        <tr>
          <td>
            <p align="center">10/20</p>
          </td>
          <td>
            <p align="center">39.9</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">4.28</p>
          </td>
          <td>
            <p align="center">91.3</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">1.25</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
        </tr>
        <tr>
          <td>
            <p align="center">10/21</p>
          </td>
          <td>
            <p align="center">39.3</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">3.37</p>
          </td>
          <td>
            <p align="center">85.5</p>
          </td>
          <td>
            <p align="center">57.6</p>
          </td>
          <td>
            <p align="center">19.4</p>
          </td>
          <td>
            <p align="center">29.6</p>
          </td>
          <td>
            <p align="center">18</p>
          </td>
          <td>
            <p align="center">23</p>
          </td>
          <td>
            <p align="center">20.1</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">2.11</p>
          </td>
        </tr>
        <tr>
          <td>
            <p align="center">10/22</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">乏力纳差，轻度腹胀</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
        </tr>
        <tr>
          <td>
            <p align="center">10/25</p>
          </td>
          <td>
            <p align="center">37.4</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">1.58</p>
          </td>
          <td>
            <p align="center">72.2</p>
          </td>
          <td>
            <p align="center">27.7</p>
          </td>
          <td>
            <p align="center">16.0</p>
          </td>
          <td>
            <p align="center">29.4</p>
          </td>
          <td>
            <p align="center">1.2</p>
          </td>
          <td>
            <p align="center">14</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">0.39</p>
          </td>
        </tr>
        <tr>
          <td>
            <p align="center">10/25</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">4.85</p>
          </td>
          <td>
            <p align="center">89.1</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
          <td>
            <p align="center">93.26</p>
          </td>
          <td>
            <p align="center"><br></p>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

在PC浏览器和Android的网页浏览中，页面的结果布局如下：

但在iOS的UIWebView中，它就像：

如何使用UIWebView使页面呈现与在PC浏览器中呈现的相同？

更新：

在页面的源代码中添加一个具有足够硬编码宽度值的视口元将得到我想要的内容：

<meta name = "viewport" content = "width=1000, initial-scale = 1.0, minimum-scale = 1.0, user-scalable = yes">

但这似乎并不是实现这一目标的正确方法。我一直认为如果我想要重排页面，那么我需要添加width=device-width的视口元素，但是如果我希望页面既不是缩放也不是重排然后我不需要设置任何东西。 iOS UIWebView不是这样的吗？

Answer 1

在创建webview之前尝试这样的事情

NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:@"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:25.0) Gecko/20100101 Firefox/25.0", @"UserAgent", nil];
[[NSUserDefaults standardUserDefaults] registerDefaults:dictionary];

或尝试这样

 String newUA= "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0";
 mWebView.getSettings().setUserAgentString(newUA);

Answer 2

试试这个。

NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"Sample" ofType:@"html" inDirectory:nil]];
self.webView.scalesPageToFit = YES;
[self.webView loadRequest:[NSURLRequest requestWithURL:url]];

缩放后

Answer 3

您可以添加左右边距。它将阻止UIWebView将页面内容拟合到屏幕宽度。

Answer 4

尝试添加CSS：

environment.tf

如何防止UIWebView将页面内容拟合到屏幕宽度（既不缩放也不回流）？

4 个答案: