h5页面嵌套在安卓或IOS中的坑

原创 nyy3723 随笔 移动端的坑 2327阅读 2017-12-07 17:27:32 举报

最近由于原生app开发太忙,整个商户一块用h5页面来做,之后嵌套在app里面,在这个过程中,碰到一些之前没有遇到的坑,做个记录,下次防坑。
1、弹出模态框,底部内容禁止滑动。
一开始想到的就是点击按钮,模态框出现时,给body内容加上overflow:hidden,在谷歌模拟器上这样是没有问题的,但是真机测试中不行,需要在当前模态框中加入
$('模态框').on('touchmove', function(e) {
e.preventDefault();
});
2、出现模态框时候,点击别的空白区域,模态框消失
应用场景:当点击页面右上角更多时候,出现一个模态框里面有举报,收藏等操作,点击没有内容区域时候就需要隐藏这个框。
处理方法:$('模态框').on('click',function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if($(target).hasClass('shelter')){
$(target).fadeOut(200);
}
})
利用的就是事件委托原理,判断目标元素是直属的模态框就隐藏,否则显示(点击模态框空白处隐藏)
3、ios或Android中 页面的点击事件会有一个灰色的层出现
应用场景:由于没有用tap这些移动端专有的事件,移动端的a链接跳转或者元素的click事件会有灰色背景
处理方法:需要用的的标签{
background-color:transparent;
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
4、修改input 的 placeholder的颜色
应用场景:这个问题比较老生常谈,在移动端遇到的很多,input的提示文字要浅点,输入的文字较深
处理方法:input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { / WebKit/
color:#ccc ;
}
input:-moz-placeholder, textarea:-moz-placeholder { / Mozilla Firefox 4 to 18 /
color:#ccc ;
}
input::-moz-placeholder, textarea::-moz-placeholder { / Mozilla Firefox 19+ /
color:#ccc ;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { / IE 10+ /
color:#ccc ;
}
5、可输入的div
应用场景:在表单页面,需要输入文字很多的文本框,input不能换行,textarea虽然可以,但是它的高度不能随文本增加而增高(当然js可以实现),但是可以css实现的就不需要js了
处理方法:给div增加 contenteditable="true" 属性,但无法去除从网页粘贴过来内容的格式,用contenteditable="plaintext-only",既可以只粘贴文字了,需要注意的是,在ios中,需要给当前元素加-webkit-user-select:text;属性,否则,会弹出软键盘,但是输入不了文字。
html 代码

6、flex属性的兼容性
之前的iPhone测试5,6,7都没有问题,在8上面的flex布局全部混乱,iPhone的版本8以上对flex布局支持不友好。
之前的 .div{
display: flex;
}
.div-item{
flex:1;
}改成
.div {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.div-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
目前到这,后面持续更新……

评论 ( 24 )
最新评论
她让我换网名 2018-05-25 16:06:26 24F

fixed弹出层里面的input在ios里面 焦点也对不上的

解决方法

在出现input的时候 把body的定位改成 $("body").css({"position":"fixed","width":"100%",});

关闭的时候 改成 $("body").css("position","relative")

我的小苹果 18F 2017-12-20 23:50:01 23F

谢谢

nyy3723 21F 2017-12-20 09:41:45 22F

应该会吧 我这个就是做的商城项目

web2014 2017-12-20 08:29:33 21F

不错,在做商城项目,可能会用上

nyy3723 19F 2017-12-19 11:11:18 20F

谢谢

jie4038 2017-12-19 09:40:36 19F

jie4038 16F 2017-12-19 09:40:14 18F

在这遇到你,貌似收藏夹里有你的博客

nyy3723 15F 2017-12-18 09:38:21 17F

就是h5页面 嵌入元素的ios和安卓

我的小苹果 2017-12-15 23:14:03 16F

关于cookie,遇到一个锅,原生的app中退出登录的时候,直接把所有的cookie都清除了,就问惊喜不。

lawrence 2017-12-15 20:04:14 15F

原生app,是安卓,还是IOS?

nyy3723 11F 2017-12-11 13:43:11 14F

哈哈哈哈

nyy3723 8F 2017-12-11 13:42:33 13F

嗯 iPhone7有什么特殊性吗

nyy3723 10F 2017-12-11 13:41:51 12F

这样也能解决问题 网上查的移动端少用定位 用flex定位会少了很多麻烦

m220042 2017-12-11 11:51:11 11F

腻害了 我的哥

沉勇 4F 2017-12-11 10:03:44 10F

我有时候做法是聚焦的时候,重新设置position属性;移出,重新再设置陈fixed,

沉勇 5F 2017-12-11 10:02:07 9F

嗯,APP开发把cookie放到url是丢失的;后来设置到host就好了~cookieManager.setCookie(url, cookies)---------host:cookieManager.setCookie(host, cookies);

nyy3723 7F 2017-12-09 16:57:57 8F

用了啊 iPhonex都适配了的

lawrence 2017-12-09 16:48:57 7F

用上iphone7了么?

nyy3723 5F 2017-12-09 14:02:52 6F

对的对的 h5的local保存还是很好的

走火爱上鱼 2017-12-08 21:29:20 5F

遇到过cookie丢失 我想你是在webview里面遇到的吧 很简单 找你们app开发 这锅H5不背。。。