ios webview 图片自适应屏幕宽度

//这个知识点主要是自己最近在尝试写后台接口  在移动端展示的时候需要用到这个知识点,在webViewDidFinishLoad方法里面执行一段js代码  拿到各个图片  判断其宽度是否大于当前手机屏幕尺寸,是的话则调整为屏幕宽度显示,不是的话则原样显示

代码如下:
 1 - (void)webViewDidFinishLoad:(UIWebView *)webView {
 2 //    2、都有效果
 3     NSString *js=@"var script = document.createElement(‘script‘);"
 4     "script.type = ‘text/javascript‘;"
 5     "script.text = \"function ResizeImages() { "
 6     "var myimg,oldwidth;"
 7     "var maxwidth = %f;"
 8     "for(i=0;i <document.images.length;i++){"
 9     "myimg = document.images[i];"
10     "if(myimg.width > maxwidth){"
11     "oldwidth = myimg.width;"
12     "myimg.width = %f;"
13     "}"
14     "}"
15     "}\";"
16     "document.getElementsByTagName(‘head‘)[0].appendChild(script);";
17     js=[NSString stringWithFormat:js,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.width-15];
18     [webView stringByEvaluatingJavaScriptFromString:js];
19     [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
20
21 }

参考链接:

时间: 2024-12-20 00:02:37

ios webview 图片自适应屏幕宽度的相关文章

ios navigationcontroller 滑动返回与webview加载html图片自适应屏幕宽度

1 .ios navigationcontroller 滑动返回 滑动返回是navigationcontroller默认返回按钮自带的功能,如果返回按钮自定义该功能失效, 解决的办法有两个: ① self.navigationItem.backBarButtonItem =   [[UIBarButtonItem alloc]initWithCustomView:button];//这个方法用不了 只能用 self.navigationItem.backBarButtonItem = [ [UI

android webview使用心得 屏幕宽度自适应

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的几种方法 第一种方法: WebSettings settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); LayoutAlgorithm是一个枚举用来控制页面的布局,有三

html中图片自适应浏览器,宽度高度自适应,图片自适应屏幕的小而不是宽高固定不变

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Show.aspx.cs" Inherits="Wlxxs.Web.Xxs.Show" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

20160622 html5移动页面自适应屏幕宽度

html5移动页面自适应屏幕宽度 1.使用meta标签,在头部加入下面代码 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 2.用百分比,‘百’指的是父元素,这只适合布局简单的页面,复杂的页面实现很困难. 3.用CSS相对单位rem. 4.媒体查询@m

自适应屏幕宽度的居中布局

div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f; _margin-right:-3px;} .right{ float:right; width:100px; background:#0f0; _margin-left:-3px;} .center{ background:#333; margin:0 100px; _margin:0 97px;} <div class="lef

改变图片的透明度,图片自适应屏幕

改变图片的透明度 float speed=0.2f; float starttime; void Start () { starttime = Time.time; } void Update() { GUITexture.color.a = Mathf.Lerp (0, 1, (Time.time - starttime) * speed); } --------------------------------------------------------------------- 图片自适

手机端 图片自适应屏幕尺寸

<script type="text/javascript"> $(function () { var imglist = document.getElementsByTagName("img"); //安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持 var _width; doDraw(); window.onresize = function () { //捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示

html图片自适应屏幕大小(手机)

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body { min-width: 320px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif; color: #333; -webkit-text-s

webview 设置view自适应屏幕宽度

WebSettings webSettings= webView.getSettings(); webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); LayoutAlgorithm是一个枚举,用来控制html的布局,总共有三种类型:NORMAL:正常显示,没有渲染变化.SINGLE_COLUMN:把所有内容放到WebView组件等宽的一列中.NARROW_COLUMNS:可能的话,使所有列的宽度不超过屏幕宽度.