Those pits that the mobile web has stepped on 2

Original link: https://geniuspeng.github.io/2018/04/26/mobile-issues2/

The pits are endless, um... The back pit of the Yangtze River pushes the front pit~~

About audio autoplay

The audio tag of H5 realizes the possibility of audio playback on the browser side. Although the current mobile phone browsers also support this tag and related attributes, different mobile phones still have various behaviors on it, and sometimes it also communicates with the client side. related to the audio control. This time I encountered a problem that the audio cannot be played automatically in iOS (autoplay is invalid, I guess they considered the traffic problem), and the solution is not bad. Generally, if it is in WeChat, it can be solved by using a built-in event. But you need to import their js first:

1	<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"/>

Then listen to a WeChat-defined special event WeixinJSBridgeReady after ready:

1
2
3

document.addEventListener("WeixinJSBridgeReady", function () { 
document.getElementById('bgm').play(); }, false);

If it is Safari, it is basically solved by interaction, such as letting the user play music when the user touches it for the first time

1
2
3

$(document).one('touchstart', function() {
document.getElementById('bgm').play(); })

About the soft keyboard

The input box in the H5 page, the soft keyboard will pop up when the input box is focused, and the keyboard will disappear when the focus is lost. In fact, it's fine in normal terms, but sometimes the soft keyboard may block the input box or the button. This is not a big problem. The headache this time is some strange Android devices. If absolute positioning is used Or fixed, when the soft keyboard pops up, push the page up, and a large blank space appears under the push, which is very ugly~ The solution here is actually very simple

1	$('body').height($('body')[0].clientHeight);

There are also some more exotic Android phones. When the soft keyboard comes out, the page is pushed up, and when it disappears, the page is pulled down, and a large blank area is pulled out. It needs to be swiped up manually to be normal. I tried a lot of methods here, and finally found a solution that can be solved. You need to find the relevant element that was pulled down, and then execute the scrollIntoView() method.

let input = document.querySelector('input')
input.addEventListener('blur', function (e) {
    e.preventDefault();
    setTimeout(() => {
        $('.the-element')[0].scrollIntoView(); 
    }, 0)
})

About the usage of scrollIntoView:

element.scrollIntoView(); 
//If no parameter is displayed, it is equivalent to element.scrollIntoView(true)
 element.scrollIntoView(alignToTop); //Boolean type parameter //If true, the top of the element will scroll as far as possible to The position to align with the top of the visible area of the parent element, which is the default. //If false, the bottom of the element will scroll as far as possible to align with the bottom of the visible area of the parent element element.scrollIntoView(scrollIntoViewOptions); //Object type parameter 




 



{ 
behavior: 'auto' | 'instant' | 'smooth', 
block: 'start' | 'end' 
} 

//behavior: Defines the behavior of element scrolling. Instant represents immediate scrolling of elements, and smooth represents animated smooth scrolling. However, most browsers do not support the property value of smooth, which is generally instant. 
//block: defines the direction of element scrolling, corresponding to the Boolean type parameter, if the start value is set, it is equivalent to setting element.scrollIntoView(true), if the end value is set, it is equivalent to setting element.scrollIntoView(false) ),

Well, learn more~~ Long way to go!

Welfare at the end of the sentence:

Benefit 1: A collection of 10G resources such as front-end, Java, product manager, WeChat applet, Python, etc. will be released : https://www.jianshu.com/p/e8197d4d9 880

Welfare 2: A full set of detailed video tutorials for WeChat mini-program introduction and actual combat.

【How to receive】

Pay attention to [Programming Micro Journal] WeChat public account:

Reply to [Mini Program Demo] One-click to receive 130 Wechat Mini Program source code demo resources.

Reply [Receive resources] One-click to receive front-end, Java, product manager, WeChat applet, Python and other resource collections 10G resources to be released.