zoukankan      html  css  js  c++  java
  • 使用webview加载html图片、表单超屏幕问题

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

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

    只需加上一段代码就OK。

     [self.webView loadHTMLString:[NSString stringWithFormat:@"<!DOCTYPE html><html><style type="text/css">img{ %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}table{ %.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{ %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}table{ %.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{ %.fpx !important; height:%.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;}table{ %.fpx !important; margin:0 !important;padding:0 !important;left:0 !important;right:0 !important;}

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

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

  • 相关阅读:
    23种设计模式全解析
    Dubbo
    存储过程——存储过程与函数(四)
    ADO.NET- 基础总结及实例介绍
    存储过程——存储过程与视图(三)
    存储过程——增删改(二)
    简易三层架构详解
    Ado.Net实现简易(省、市、县)三级联动查询,还附加Access数据
    存储过程——介绍(一)
    SqlBulkCopy批量写入25万条数据只需3s
  • 原文地址:https://www.cnblogs.com/wujie123/p/6284961.html
Copyright © 2011-2022 走看看