移动端的页面平时偶尔会有需求需要做,特别是webview嵌入的页面居多,由于是有时候做,有时候不做,所以,需求来的时候从新写页面还是有点麻烦,所以把之前写的记录一下,下次直接copy就好了。
移动端webview模板
css
一些css初始化的内容
1 | @charset "utf-8"; |
js来控制rem大小代码
js来修改html的font-size大小
1 | (function (doc, win) { |
html页面内容
1 |
|
这个webview页面相对麻烦些,需求是在ios页面的固定位置显示webview内容,并不是新开一个新页面来整个显示webview内容,这样ios需要获取h5页面的高,而页面的内容又是h5页面通过ajax获取回来的,所以,ajax请求成功后,将内容插入到页面中,如果有图片的话,等待图片全部加载之后再计算页面的高,返给ios。这时,ios提供了一个函数注入到h5页面里了,我们直接调用就可以,代码中就是这个函数window.webkit.messageHandlers.jsCallNative.postMessage();
- 补充点这方面的知识2019/2/2
1
2
3
4
5
6
7
8
9if(isiOS) { // 如果是ios的话
window.webkit.messageHandlers.iosCallback.postMessage(null); // 我告诉ios端可以调我提供的callAppFnInfo函数,它会把值给我传过来。
function callAppFnInfo(info) {
alert(info);
}
}else { // android环境
var da = window.WebViewInterface.getId(); // 直接调取android提供的方法,它可以直接返回值
alert(da);
}