使用webview加载html图片、表单超屏幕问题
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图片大小自适应与文章自动换行
http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...
- 【iOS】WebView加载HTML图片大小自适应与文章自动换行
在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制 ...
- 安卓 WebView加载本地图片时居中显示
在一个项目中使用WebView显示gif图片(自定义的View无法放大gif),当图片过小时只在左侧显示,经过研究发现无论设置android:layout_gravity="center_h ...
- UIWebView中加载的网页尺寸太大,如何让网页适应屏幕大小 WebView加载HTML图片大小自适应与文章自动换行
webview.scalesPageToFit = YES; http://www.cnblogs.com/yujidewu/p/5740934.html 若需要根据图片原本大小,宽度小于320px的 ...
- JavaScript之加载表格、表单行数据[插件]
/*** * name:加载表格或表单数据[通用] * name:load-table-or-form-data-common.js * * author:zengtai * date:2017-07 ...
- Android开发问题积累 <加载在线Gif><WebView无法加载网页图片>
在线Gif加载 解决办法 Glide完美解决 Glide.with(context).load(pic).placeholder(R.drawable.loading).into(imageView) ...
- iOS WebView 加载本地资源(图片,文件等)
https://www.cnblogs.com/dhui69/p/5596917.html iOS WebView 加载本地资源(图片,文件等) NSString *path = [[NSBundle ...
- Android WebView加载本地html并实现Java与JS交互
最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是 ...
- 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件
原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...
随机推荐
- Servlet的Request.getInputStream()只能读取一次问题
Servlet的Request.getInputStream()只能读取一次问题 这个星期公司的项目接口进行改造,公司的接口有的采用了WebService的方式,有的使用的是Http协议+Servle ...
- 一步一步深入spring(1)--搭建和测试spring的开发环境
1.引用jar包 到spring的网站上下载spring的jar包(本文是2.5.6),解压缩后找到 使用spring必须引用的jar包 spring.jar commons-logging.jar ...
- java链接mysql数据库
package com.DateSystem; import java.sql.Connection; import java.sql.DriverManager; import java.sql.S ...
- Android 检测是否连接蓝牙耳机
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- 【CSS】定位元素居中显示
1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...
- form表单重复提交,type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
- python基础语言以及if/while语句结构
接下来学会了变量:用简单的变量来代替复杂的字符串 变量首字母不能是数字或者特殊符号~!@#¥等. 字符集的发展: ASCII 255个 1个占1bytes------>1980年 GB2312 ...
- PHP集成环境自定义设置PHP版本,同时运行多个php版本,700个PHP版本随时切换,一键开启常用模块。
本文采用我自己开发的纯绿色版WAMP环境(我将这个WAMP环境命名为PHPWAMP) (PHPWAMP默认集成VC,不需要单独安装) 那么什么是WAMP环境?WAMP这个词是什么意思? Windows ...
- centos jdk 安装
1)下载JDK 1.7(1.7.0_25) 下载地址为: http://www.Oracle.com/technetwork/java/javase/downloads/jdk7-downloads- ...
- 关于一条定制长按Power键弹出Dialog的需求
如题,需要定制长按Power键弹出的Dialog,UI上的大致效果是:全屏,中间下拉按钮“Swipe Down To Power Off”下拉关机,底部左右两侧“Reboot”,“Cancel”按钮, ...