There will be a 300ms delay in response to a click event on IOS:
换用zepto的touch模块，tap事件也是为了解决在click的延迟问题
或者引入fastclick.js解决
Slow scrolling on mobile pages
css在body元素上添加-webkit-overflow-scrolling: touch;
Soft keyboard and input box problem
The problem with the h5 page is that when the input box is at the bottom, the input box will be blocked after clicking the soft keyboard. It can be solved in the following ways:
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("元素").css("position","static");
}else{
$("元素").css("position","absolute");
}
});
Another soft keyboard input box problem can also be regarded as a fixed positioning failure problem. The fixed element under ios is prone to positioning errors. When the soft keyboard pops up, it affects the fixed element positioning
1. Although isScroll.js can solve the fixed positioning scrolling problem well , But not as a last resort, we try our best to try a layout scheme that does not rely on third-party libraries to simplify the implementation.
Solutions:
Since the fixed element of the page will be invalid after the soft keyboard is invoked under iOS, causing scrolling along with the page, if the page does not scroll too long, then even if the fixed element fails, it cannot follow the page scroll, so The above problem will appear. Cooperate with the mobile page scrolling sluggishness solution css to add -webkit-overflow-scrolling: touch to the body element;
if you consider that older iOS systems do not support fixed elements, you can completely replace fixed with absolute. The effect after the test is the same.
Speaking of iOS, let's briefly talk about the layout under Android.
In Android2.3+, because overflow-scrolling is not supported, some browsers will have unsmooth scrolling. But at present, it is found that the scrolling on the body is still very smooth, so it is enough to use the first fixed positioning layout that has problems in iOS.
If you need to consider systems below Android2.3, because fixed elements are not supported, you still need to consider using isScroll.js to implement internal scrolling.
In fact, with regard to the fixed and input box issues, the basic idea is:> Since the fixed will fail after the soft keyboard is awakened, it will scroll with the page when the page can be scrolled. Therefore, if the page cannot be scrolled, even if the fixed element fails, it will not scroll, and there will be no bugs.
So we can consider solving the problem in this respect.
So far, a fixed layout that does not rely on third-party libraries is complete
// 处理iOS 微信客户端弹窗状态下调起输入法后关闭输入法页面元素错位解决办法
var ua = window.navigator.userAgent.toLowerCase();
if (/iphone|ipod|ipad/i.test(navigator.appVersion) && /MicroMessenger/i.test(ua)) {
document.body.addEventListener('focusout', () => {
console.log('focusout')
window.scrollTo({
top: 0, left: 0, behavior: 'smooth' })
});
}
//或者：
scrollto0() {
window.scrollTo(0, 0);
}
Prevent automatic adjustment of font size when rotating the screen
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;}
In some cases on the mobile terminal, the placeholder of the input will appear on the upper side of the text position:
PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
Modify the click highlight effect on the mobile terminal
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
Zepto's point through problem
Introduce fastclick.js, add the following js code to the page
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );