- 正则匹配安卓机
//移动端样式会出现ios兼容问题,所以接触到了适配设备问题,具体问题如下:
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS){
//苹果机执行部分
}else{
//安卓机执行部分
}
- 屏幕适配
//原生匹配
<script>
var html = document.getElementsByTagName("html")[0];
var width = window.innerWidth;
var fontSize = (100 / 750) * width;
if (fontSize > 100) {
fontSize = 100;
}
html.style.fontSize = fontSize + "px";
window.onresize = function() {
var html = document.getElementsByTagName("html")[0];
var width = window.innerWidth;
var fontSize = (100 / 750) * width;
if (fontSize > 100) {
fontSize = 100;
}
html.style.fontSize = fontSize + "px";
};
</script>
- 1px问题
.border{
positon:relative
}
.border:after{
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0,0,0,.2);
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
}
- 输入数字
<input name="member_phone" type="number" pattern='[0-9]*'>//安卓机使用type=number只能输入数字,ios需要添加pattern='[0-9]*'
// type="number" 有默认样式,所以需要使用一下css去除
<style>
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* 火狐 */
input[type="number"]{
-moz-appearance: textfield;
}
</style>
- 绑定事件
//使用jQuery获取元素添加绑定事件,如果是绑定body(document),ios有兼容问题,需要添加穿透样式
<style>
body{
cursor:pointer;
}
</style>
- ios键盘监听事件
document.body.addEventListener('focusin', () => { //软键盘弹起事件
console.log("键盘弹起")
})
document.body.addEventListener('focusout', () => { //软键盘关闭事件
console.log("键盘收起")
})
-
适配图片展示
需求:移动端一般由于屏幕限制,在排版上需要考虑,图片太大但是容器太小的情况,这里一般有两种处理方式,第一种比较简单,把需要呈现的图片当成背景图片,使用背景图片的 background-size: cover; 属性,让图片自动适应,铺满全部盒子;另一种就是使容器超出隐藏,每部图片等比缩放,垂直居中与容器中央.对比上面两种方法,很显然第一种比较方便且便捷,效果也会比第二种好,但是由于是背景图片,没有办法点击小图查看大图了.第二种方式可以解决这个问题,唯一难以确定的是这个缩放比,所以效果没有第一种好,但是两种均能解决这问题
-
小程序内嵌H5页面刷新问题
苹果机执行window.location.reload(),安卓机不执行,如果需要刷新H5页面,需要在原有地址上添加参数,不同地址请求才会刷新
注:微信一波小程序缓存的清除方式,退出(切换)账号,重新登录即可,一定要是完全退出后才行 -
部分苹果机点击事件失效
苹果机在微信浏览器中打开时,部分机型没有document,点击事件可能失效,最好采用类名或者id名