有没有前端童鞋碰到ios webview中页面加载不了css样式问题！？ - 知乎8被浏览1416分享邀请回答01 条评论分享收藏感谢收起标签：至少1个，最多5个
如果在客户端嵌入整个的html5一般来说是没有问题的，但是如果是某一段的html5嵌入到webview中，并且是后台传来的数据结构并且是PHP渲染，图片是背景图片，要适配手机app(适配方法是用css3的zoom属性适配，zoom=body宽度/获取背景图片的宽度（这个是后台传值的时候就有的）) 是会有想想不到的bug的，想要全屏展示，有部分两边留白的情况，下面一大块留白，这些问题都不会再iphone中显示出来的，只有万能的安卓才会有这么奇葩的问题，所以作为程序员就要找原因，解决问题首先针对两边留白的问题，你可以用各种代码尝试看看body的宽度var windowWidth = $('body').width();var windowWidth = $(window).width();var windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerW这三行代码都尝试过，可以打印在页面中（在webview中调试要打印在页面中，因为alert,和console.log这样的语句APP阻止）；打印出来之后，你会发现这三个的值是一样的，也就是说JS获取body的宽度貌似在webview中不确定，既然JS解决不了，那就让安卓传来客户端的宽度吧（他们叫db,记住他们以为的px和咱们常说的px是不一样的，所以直接问他们要dp）;只有安卓上才要、传值哦，记住不是直接传给JS而是传给PHP其次解决下面留白的问题（这个问题也是只有安卓有问题，iphone没有问题）下面留白我分析是因为结构加载进来了，所以导致body撑开了之后适配完成body收不回去了，webview也收缩不回去了（这个问题也是只有安卓有问题，iphone没有问题）唯一的办法就是修改渲染机制；方案一（图片加载完成之后，适配，但是这个方法并不好用）代码如下
win.t_ // 定时器
win.isLoad = // 控制变量
win.isImgLoad(function(){
$('.content').html($('textarea#bodyContent').val());
$('.hot-outer').each(function(){
win.set_hot("#"+this.id);
win.change_schema();
function isImgLoad (callback){
// 查找所有封面图，迭代处理
$('img').each(function(){
// 找到为0就将isLoad设为false，并退出each
if(this.height === 0){
win.isLoad =
// 为true，没有发现为0的。加载完毕
if(win.isLoad){
clearTimeout(win.t_img); // 清除定时器
// 回调函数
callback();
// 为false，因为找到了没有加载完成的图，将调用定时器递归
win.isLoad =
win.t_img = setTimeout(function(){
win.isImgLoad(callback); // 递归扫描
},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
这段代码会使底部留白出现的频率降低，但是会影响iphone的加载，比如，图片出来了一点点，下面被原生的遮住了，所以就想了另外一个方案**方案二：结构加载的时候要隐藏结构，适配完成之后再显示出来**直接正常加载，但是加载的时候要display:像图片中的这样，但是因为我的适配是提取{==$code=}代码中的类名,获取宽度做适配，当父级display:none；子级的宽度是获取不到的mapWidth = document.querySelector('.partner_img_center').style.H5中新增选择器querySelector这个是能获取到的，直接适配，然后显示，这个就是我目前的解决方案；如果各位有更好的方案，请赐教！注明：这个方法在背景图片适配各个APP场景中，并且用zoom的方法做适配的时候用到的，请注意应用场景，欢迎各位指出不足，我会加以指正~
0 收藏&&|&&1
你可能感兴趣的文章
21 收藏，7k
1 收藏，366
61 收藏，20.6k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
ios中webview设置了contentinset导致wenview中的css的fixed定位异常。
ios开发了一个上拉加载的功能，不太清楚ios是否是通过contentinset实现的，但fixed无法覆盖到底部，如下图。
这个应该如何解决？
手机客户端好像不能上传图片，放坚果云了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
已解决，确实是ios的webview设了contentInset熟悉
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：2873人阅读
iOS（195）
objetive-c（72）
最近开发的项目，需要一个webView，同时这个webView会需要引入一些项目中的资源：
一个本地的html文件，作为webView的模板两张loading图片，在图片未加载的时候进行占位jquery.js,scrollLoading.js 也是本地的，实现滚动加载图片功能
然后就开始了漫长的Google历程。
在webView中引入本地的html文件
这里最主要的一个webView的方法是：loadHTMLString:baseURL:&把HTML文件的内容以字符串的形式加载到webView里面，然后解析。
// get the model which is a html file for the webViewNSString * htmlPath = [[NSBundle mainBundle] pathForResource:@&index& ofType:@&html&];NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];// load the html file to webView[_webView loadHTMLString:htmlCont baseURL:nil];
通过上述方法，很方便的就能把一个HTML文件加载到webView中，很简单吧，接下来，来点进阶功能！
在webView中引入本地的image文件
这个功能的实现，很大程度上是借鉴了这篇文章：UIWebView – Loading External Images and CSS。大家可以去看看这篇文章，或者看我下面的继续描述。
这个功能的实现是承接上面那个方法的进一步扩展，最关键的是那个baseURL。先看实现代码：
// get the model which is a html file for the webViewNSString * htmlPath = [[NSBundle mainBundle] pathForResource:@&index& ofType:@&html&];NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
// 获取当前应用的根目录NSString *path = [[NSBundle mainBundle] bundlePath];NSURL *baseURL = [NSURL fileURLWithPath:path];
// 通过baseURL的方式加载的HTML// 可以在HTML内通过相对目录的方式加载js,css,img等文件[_webView loadHTMLString:htmlCont baseURL:baseURL];
在object-c里面通过如上面的方式加载HTML文件，指定了baseURL的值为程序的bundlePath，然后在HTML文件里面就可以自由的通过直接书写标签的方式加载图片图片文件了
&img src=&loading.png& /&;
要注意的是：
****&所有在应用内的资源文件都是在baseURL的根目录也就是此代码中的bundlePath的根目录，所以图片资源，不管在项目里面放在哪个目录结构下，在HTML内引用的时候，都是直接根目录的。
**** 特别需要强调的是 如果图片是下载到沙盒路径下的，BaseURL 也要设置为bundlePath，然后src 路径直接指向 图片名字
baseURL到底是什么东西？对此，我也很好奇，所以我NSLog了代码里面的baseURL，然后得到的结果是：file:///Users/(用户名)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/(一些大写字母加连字符加数字的序列号)/(应用名).app/ 。然后我在终端里面找到这个目录，打开一看，发现都是一些HTML，image，txt等静态资源。
bundlePath和其中的内容展示
至此，在webView中插入本地image资源的功能已经实现了，下面是更有挑战性的功能：添加js文件
添加本地js文件到webView中
这个实现说起来其实很简单，因为不需要任何代码层面上的修改，只需要按上面添加image的方式，在script的src里面直接写js的文件名即可。
但是如果直接这样写，你就会发现js资源根本没有被加载。到底image和js有什么区别？看上面的图片，可以看到默认在bundlePath里面是没有我引入到工程里面的jquery.js和scrollLoading.js的。那么，这个是不是导致js资源没有被正确加载的原因？
在这篇文章：How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class和这篇文章iPhone基于lightbox的图片放大特效和网页布局中，都提及到一个
Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code
In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.
方法是有了，可是这种英文的描述，还没有附加图片，实在是让人看不懂，大致知道的就是：js文件在xcode里面，默认是一种需要被编译的文件，这就导致它不会被放到我们刚刚放到的BundlePath(更专业的名称应该是Bundle Resources)里。
所以要解决的问题是，怎样才能使得js文件不被编译并且放到Bundle Resources中。
期间为了理解上面那两句英文而Google的经历就不说了，直接说结果吧。
在xcode里面，每个project都有至少一个Targets(多个的也有，但是我不懂)，在Targets里面(打开Targets的方式是在左侧栏，点击project，在中间的内容区，就会出现project喝Targets)，存放了一些资源文件，在Build Phases下可以看到，跟本次内容关联最大的有两项：Compile Sources和Copy Bundle Resources。在没修改的情况下，展开Compile Sources就能看到找了很久的jquery.js和scrollLoading.js
打开Targets(基于xcode5的界面)展开Compile
Sources后能看到两个js文件
接下来要做的很简单，从Compile Sources中删除两个js文件，再在Copy Bundle Resources中添加这两个文件，一切搞定。想来(偷懒，不想Google继续深入了解了)，Compile Sources是放置那些需要被编译的文件，.h,.m和冤枉的.js文件等等，而Copy Bundle Resources里面放的是一些资源文件，在程序在运行时会引入的，同时在项目打包之后也依旧存在的文件。
其他格式的资源文件，在添加的时候也大致就是这个流程，不重复说了。
原文地址：/web/html-css/46.shtml
参考链接：
/bbs/read.php?tid-258631.html
&/kf/830.html
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：302732次
积分：4239
积分：4239
排名：第7311名
原创：122篇
转载：173篇
评论：19条
(6)(9)(2)(4)(2)(2)(12)(1)(5)(12)(4)(7)(4)(1)(14)(5)(10)(4)(1)(6)(7)(7)(13)(19)(47)(37)(31)(13)(12)