Mobile H5 Development Subtotal

1. The rounded corners on border-radius Android are not round

Some lower versions of Android systems do not support 50%the writing of percentage ( ). Just change the rounded corners to a value much larger than the width and height, and it is better to use px for the fast height, or the odd number of rem may also cause failure round

.div{ 
    background-color: #f1464a; 
    width:4px; 
    height:4px; 
    border-radius:2px; 
}

2. A flashing or gray background appears after clicking on the mobile website or APP

html,body{
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

3. Solve the problem that the input box is blocked by the virtual keyboard and automatically scroll to the visible area

	window.addEventListener('resize',()=>{
		if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
			setTimeout(()=>{
				//true:元素在可视区域中居中对齐
				//false:元素可能顶部或底部对齐，视乎元素靠哪边更近
				document.activeElement.scrollIntoViewIfNeeded(true);
			},400)
		}
	})