ios内嵌H5 cookie失效 h5在ios兼容性问题 |
您所在的位置：网站首页 › ios内嵌h5 › ios内嵌H5 cookie失效 h5在ios兼容性问题 |
| H5, 遇到的 ios 兼容性问题1.ios 中日期格式 new Date('2019-10-11') 无效;
解决: new Date('2019-10-11'.replace(/\-/g, '/'));2.ios 中日期格式 new Date(' 2019-07-24 11:35:00.0') 无效;
解决: new Date(' 2019-07-24 11:35:00.0'.replace(/\-/g, '/').replace('.0', ''));3.ios 中 input[type='date'] placeholder 默认显示空白问题;
解决( 用伪类添加一个placeholder属性,
onfoucs时removeAttribute('placeholder'),
onblur的时候setAttribute('placeholder', '')
):
input[type='date']:before {
content: attr(placeholder);
color: rgba(0,0,0,0.7);
}
input:-webkit-input-placeholder{ color: #999; }4.ios 中 overflow: scroll 滚动效果卡顿;
解决: -webkit-overflow-scroll: touch;
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */5.ios 中 input disabled 时的color 很浅;
原因: iPhone Safari/webview input disabled 会有默认样式；
解决:
input:disabled {
color: #999;
opacity: 1;
-webkit-text-fill-color: #999;
}6.ios 中 transition, animation 属性支持性很差, 会造成屏幕滑动抖动;(暂时无法解决)7.使用css伪类的content设置图标时, 图标颜色设置无效;
需增加以下配置;
原因: 资料查到说是ios9以后不再支持css更改这种符号的颜色, 如需要,使用 U+FE0E VARIATION SELECTOR-15字符;
如: content: "\2714\fe0e;8.ios使用input,激活的时候会自动放大页面问题;
解决:
1.
2. 同时强制设置input字体16px, 或者focus的时候设置16px;(针对小于16px的input)9.iphonex的body设置height:100%;底部会有24px的留白;
原因: 本人页面因为使用html, body{height: 100%;}, body:100% 这个属性并不能在iphonex撑满可视区域;
解决: 官方提供的meta(我这里使用好像没效果);
viewport-fit：有三个值contain：可视窗口完全包含网页内容；cover：网页内容完全覆盖可视窗口；auto：同contain；
通过给页面设置viewport-fit=cover，可以将页面的布局延伸到页面顶部和底部。
于是(暂时解决问题方法时, 使用 height: 100vh)软键盘将页面顶起来、收起未回落问题 我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。 // 记录原有的视口高度 const originalHeight = document.body.clientHeight || document.documentElement.clientHeight; window.onresize = function(){ var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if(resizeHeight < originalHeight ){ // 恢复内容区域高度 // const container = document.getElementById("container") // 例如 container.style.height = originalHeight; } }键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。 兼容原理，1.判断版本类型 2.更改滚动的可视区域 const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); if (!isWechat) return; const wechatVersion = wechatInfo[1]; const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); // 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口 if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) { window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight)); }window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口使用 QRCode 生成二维码 QRCode.toDataURL(url, options)H5通过jsbridge调用原生的分享 第一种通过注入API 就是在原生里面先写好打开原生分享的逻辑的一个函数，但是不执行，然后把调用这个函数挂载到webview.window上，然后再H5页面需要的调用的时候就直接传入函数中的参数，调用函数就可以调用原生的分享 Android的WebView提供了addJavascriptInterface方法 ，可以在原生里面写js 开启Javascript使能、传递交互接口对象、加载web页面。 WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); settings.setDefaultTextEncodingName("utf-8"); mWebView.addJavascriptInterface(new WebViewUtils(mWebView), "androidInterface"); mWebView.loadUrl("file:///android_asset/test.html");第二种 通过拦截拦截URL Scheme 是在原生里面通过ifream.src ：自定义网址并携带参数，在原生里面拦截这个接口，并且取出里面的参数，然后通过区分发来的这个接口，来的调用原生的分享 为什么选择iframe.src不选择location.herf?(因为如果通过location.href连续调用Native，很容易丢失一些调用)创建请求需要一定的耗时，比诸如API的方式调用同样的功能耗时更长。Native调用JS的方式Native调用js需要,JavaScript的方法必须在全局的window上即可 Android 4.4以前，通过loadUrl方法，执行一段js代码来实现 loadUrl方式使用起来方便简洁，但是效率低无法获得返回结果且调用的时候会刷新WebView Android 4.4以后可以使用evaluateJavascript方法 evaluateJavascript方法效率高获取返回值方便。调用的时候不刷新WebView webView.loadUrl("javascript:" + javaScriptString); webView.evaluateJavascript(javaScriptString, new ValueCallback() { @Override public void onReceiveValue(String value){ xxx } });ios在WKWebview中可以通过evaluateJavaScript:javaScriptString来实现，支持iOS8.0及以上系统// swift func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil) // javaScriptString 需要调用的 JS 代码 // completionHandler 执行后的回调 // objective-c [jsContext evaluateJavaScript:@"ZcyJsBridge(ev, data)"]
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |