混合开发H5的图片怎么适配自己想要的大小
1.先上个自己没适配的图
,这个图没显示全,因为用的是webview 所以 用的是webView的代理事件 解决
2.上代码
NSString *injectionJSString =
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth=375;" // UIWebView中显示的图片最大宽度
"for(i=0;i <document.images.length;i++){"
"myimg = document.images[i];"
"oldwidth = myimg.width;"
"if(oldwidth > maxwidth){"//原图大于最大宽度
"if(myimg.width>myimg.height){"//原图的宽度大于高度
"myimg.width=maxwidth*2/3;"
"myimg.height = myimg.width*myimg.height/oldwidth;" //修改高度
"}else{"//原图的宽度小于高度
"myimg.width=maxwidth*2/3;"
"myimg.height = myimg.width*myimg.height/oldwidth;" //修改高度
"}"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);";
[webView stringByEvaluatingJavaScriptFromString:injectionJSString];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
3.然后出的效果图是这样的
4.既然写到这里了,我就顺便把计算webView的内容高度也写了吧
5.上代码
NSString *injectionJSString2 = @"var script = document.createElement('meta');"
"script.name = 'viewport';"
"script.content=\"initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"
"document.getElementsByTagName('head')[0].appendChild(script);";
[webView stringByEvaluatingJavaScriptFromString:injectionJSString2];
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '100%'"];//修改百分
CGRect frame = webView.frame;
frame.size.width = SKDeviceWidth;
frame.size.height = 1;
webView.frame = frame;
if (FourInch) {
frame.size.height = webView.scrollView.contentSize.height+25;
}else if (FourOfSevenInch )
{
frame.size.height = webView.scrollView.contentSize.height+15;
}else if (FiveOfFifthInch)
{
frame.size.height = webView.scrollView.contentSize.height+15;
}
6.其实方法有很多,不管是上面的适配还是得到高度,还可以用另外一种方法统一解决
7.这个 我就只上一个关键代码
//获取webView 中的所有H5内容
NSString *str=[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.innerHTML"];
这个数据获得,能得到所有H5代码的标签,内容,等等 通过这个 可以自己拿到字符去改变,嘿嘿 这个我没做,不过可以走通
混合开发H5的图片怎么适配自己想要的大小的更多相关文章
- 混合开发 h5+ 沉浸式的适配
1.需要在mainfest.json plus对象里添加 "statusbar": { "immersed": "true", " ...
- 基于H5的混合开发介绍(一)WebView
转自: https://www.cnblogs.com/sanchang/p/9261461.html 一 WebView到底是什么 1 WebView是一种控件,它基于webkit引擎,因此具 ...
- 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案
概述 近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...
- H5混合开发二维码扫描以及调用本地摄像头
今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...
- H5混合开发app常用代码
1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
- 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
- uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程
前言: 为什么会写这么一个教程,因为很久之前做过一个对接银行POS我们的系统是使用的H5开发的app应用.但是假如对结果银行相关业务的小伙伴应该都清楚,银行的业务相对于其他的对接方而言安全性比较高,而 ...
- ios&h5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
随机推荐
- F:ungeon Master
总时间限制: 1000ms 内存限制: 65536kB描述You are trapped in a 3D dungeon and need to find the quickest way out! ...
- Python高级特性学习笔记
切片(slice) 可简化循环取元素的操作. L[0:3] or L[:3] 表示从索引0的位置开始,到索引3为止,但不包括索引3的前3个元素(L[0],L[1],L[2]); L[-2:]表示取包括 ...
- linux 命令行启动虚拟机
vmrun -T ws start /root/vmware/Windows\ Server\ 2012/Windows\ Server\ 2012.vmx nogui
- 移动web开发问题集
一.让微信内置浏览器(x5)支持 flex .item-flex { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align ...
- maven pom.xml
什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的u ...
- 用JS修改checkbox的选中状态
代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- function change() { var c=document.myfo ...
- Ubuntu14.04使用apt-fast来加快apt-get下载的教程
代码如下: $ sudo add-apt-repository ppa:saiarcot895/myppa $ sudo apt-get update $ sudo apt-get install a ...
- android学习之线性布局
效图如下 移通152余继彪 该布局使用了线性布局完成 父布局为线性布局,黄色和灰色部分为水平的线性布局,剩余50%部分为水平线性布局,该布局中包含了两个垂直的线性布局分别占了三分之1和三分之二
- js动画之多物体运动
多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...
- Raspberry Pi Resources-Using the UART
参考:RPi Serial Connection 本文来自:http://www.raspberry-projects.com/pi/programming-in-c/uart-serial-port ...