webView加载html代码时,使用webView自带的 scalesPageToFit 

可以解决图片所带来的超过屏幕问题;但是,所带来的问题就是文字变小了,怎样让图片边小,并且文字还是原来html里大小?

只需加上一段代码就OK。

 [self.webView loadHTMLString:[NSString stringWithFormat:@"<!DOCTYPE html><html><style type=\"text/css\">img{ width: %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}table{ width: %.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;right:0 !important;}</style><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\"></head><body>%@</body></html>",Width - 80, Width - 20, Width - 30,_detial.tznr] baseURL:nil];

    }

在 loadHTMLString后面加上<!DOCTYPE html><html><style type=\"text/css\">img{ width: %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}table{ width: %.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;right:0 !important;}</style><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\"></head><body>%@</body></html>

就可以了;主要是 img{ width: %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}table{ width: %.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;right:0 !important;}

img{ width: %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}是设置图片的宽高来覆盖img标签里的style,可以自行设置其宽高。

 

而table{ width: %.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;right:0 !important;}是设置表单的宽度适应手机屏幕,高度不用设置。

使用webview加载html图片、表单超屏幕问题

使用webview加载html图片、表单超屏幕问题

相关文章:

  • 2022-12-23
  • 2022-02-28
  • 2022-01-07
  • 2022-12-23
  • 2021-04-19
  • 2021-04-14
  • 2021-06-01
  • 2022-12-23
猜你喜欢
  • 2021-09-15
  • 2021-11-28
  • 2021-08-30
  • 2022-12-23
  • 2022-01-08
  • 2022-01-27
  • 2021-06-07
相关资源
相似解决方案