标签：监听 flow first port style 焦点 math lse device
1.移动端h5展示一般通过设置meta的viewport来规范页面的展示效果
/* 在ios >= 10 系统下，user-scalable=no已不起作用 */
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0 user-scalable=no">
2.移动端样式响应式js文件，下载文件可以找我，现在说一下我将整个页面的font-size设置为100px，这样依据这个，所有的rem也是很好计算的
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 560) { width = 560 * dpr; } var wr; var rem; if(width==375){ wr=width / 100; rem = width / wr; }else{ wr=width / 375; rem=wr * 100; } docEl.style.fontSize = rem + ‘px‘; flexible.rem = win.rem = rem; }
3.数据滑动到页面底部自动加载更多数据，手机不同，到达底部后返回的数据不同，因此需要在此基础上加上一个范围
var firstX = 0,firstY = 0,endX = 0,endY = 0; window.addEventListener(‘touchstart‘,function(e){ firstX = e.targetTouches[0].clientX; firstY = e.targetTouches[0].clientY; }) window.addEventListener(‘touchend‘,function(e){ endX = e.changedTouches[0].clientX; endY = e.changedTouches[0].clientY; moveX = endX - firstX; moveY = endY - firstY; if(Math.abs(moveX) > 60 || Math.abs(moveY) > 60){ if(Math.abs(moveX) > Math.abs(moveY)){ var ele = moveX > 0 ? ‘向右‘ : ‘向左‘; }else{ var ele = moveY > 0 ? ‘向下‘ : ‘向上‘; // alert(ele) if(ele==‘向上‘){ var scrollTop = parseInt($(document).scrollTop()); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight <= scrollHeight + 168 && scrollTop + windowHeight >= scrollHeight - 168) { //你需要实现的效果 } } } } })
4.ios端下滑不流畅
/*只需要在css里面加一行代码，代码如下*/ -webkit-overflow-scrolling: touch;
5.flex布局部分手机靠左侧布局（一定要用兼容性写法）
display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox;
6.点击输入框之后，ios端页面整体上移，失去焦点之后，页面不回原来的位置
$("input,select,textarea").blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
})
7.禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
8.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发
/* 只需要对不触发click事件的元素添加一行css代码 */ cursor: pointer;
未完。。。待续。。。
欢迎各位同仁提出更好的解决办法
标签：监听 flow first port style 焦点 math lse device
原文地址：https://www.cnblogs.com/wangvv/p/13503935.html
