前端开发html5页面嵌套在Android/IOS中的遇到的坑

by 前端开发者 · Published 2018年5月29日20:25:20 · Updated 2018年5月29日20:58:29

摘要：ios与安卓前端界面开发的区别|web前端开发分安卓和ios|网站前端开发 1、弹出模态框，底部内容禁止滑动。一开始想到的就是点击按钮，模态框出现时，给body内容加上overflow：hidden，在谷歌模拟器上这样是没有问题……

ios与安卓前端界面开发的区别|web前端开发分安卓和ios|网站前端开发

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 代码

<!DOCTYPE html>

<html>

<head>

<metahttp-equiv=”content-type” content=”text/html; charset=utf-8″ />

<title>ios及web前端开发技术</title>

div{

width:300px;

border:1pxsolid#666;

font-size:20px;

color:blue;

line-height:40px;

outline:none;

padding:10px;

}

div:empty:before{

content:attr(placeholder);

color:#ccc;

}

div:focus:before{

content:none;

}

</style>

</head>

<body>

<divcontenteditable=”plaintext-only” placeholder=”请输入内容”></div>

</body>

</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;
}
持续更新……