html 没有针对 ios 设备进行探针缩放答案

【问题标题】：html not proberly scaled for ios devicehtml 没有针对 ios 设备进行探针缩放
【发布时间】：2015-05-15 18:21:04
【问题描述】：

我正在尝试将 html 页面嵌入到我的 ios 应用程序的 webView 中。但是无论我做什么，我似乎都无法使其正确扩展。正如您在当前应用程序上看到的那样，文本和图像超出了屏幕的宽度，这不是想要的结果。当我将所有宽度设置为 100% 并将 scaleToFitPage 设置为 true 时，它为什么不能正确缩放？

viewDidLoad

    webView.scrollView.delegate = self
    webView.scrollView.showsHorizontalScrollIndicator = false
    webView.scalesPageToFit = true

HTML 代码

<!-- template.html -->
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <style type="text/css">
        body{
            font-family: 'PT Sans';
            margin-left:0;
            margin-right:0;
            margin-top: 0;
            width: 100%;
        }
        .text_div{
            padding-left:10px;
            padding-right:100px;
            font-size:26px;
            width: 100%;
            word-wrap: break-word;
            -moz-box-sizing: border-box;
            -webkit-box-sizing:
            border-box; box-sizing: border-box;

        }

    .text_div p {
         display: block;
         width: 100%;
         word-wrap: break-word;
         -moz-box-sizing: border-box;
         -webkit-box-sizing:
         border-box; box-sizing: border-box;
    }
    .title{
        font-size: 40px;
        padding-left:5px;
        word-wrap: break-word;
        padding-right: 10px;
          margin-top: 10px;
          width: 100%;
          -moz-box-sizing: border-box;
          -webkit-box-sizing:
          border-box; box-sizing: border-box;
    }
    .main_image {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center; 
    }
    .main_image img{
        width: auto;
        height: auto;

    }
    </style>
</head>
<body>

   <div class="main_image" style="background-image:url([[[main_image]]])" title="[[[alt_desc]]]"></div>
   <p class="title">[[[title]]]</p>
   <div class="text_div">
        <p>[[[full_text]]]</p>
   </div>
</body>
</html>

【问题讨论】：

在标题中添加这个<meta name="viewport" content="width=device-width; initial-scale=1.4; ">。
除了放大文本和图像之外什么也没做
如果有帮助，请查看developer.apple.com/library/ios/documentation/AppleApplications/…。
你能把整个HTML和你的css代码放在jsfiddle中，然后把链接粘贴到这里。
jsfiddle.net/2b9m40f3 在这里工作正常

标签： html ios css objective-c

【解决方案1】：

UIWebView *webView = [[UIWebView alloc] initWithFrame:self.View.frame];

NSURL *targetURL = [NSURL fileURLWithPath:html_file_url];

NSURLRequest *request = [NSURLRequest requestWithURL:targetURL];

webView.scalesPageToFit=YES;

webView.scrollView.maximumZoomScale=10.0;

webView.scrollView.minimumZoomScale=1.0;

webView.backgroundColor=[UIColor whiteColor];

[self.view addSubview:webView];

[webView loadRequest:request];

【讨论】：