On the first day after the company work, finishing some of the mobile terminal developed H5 common problems to share with you do, here is a lot of pit their own problems in the development process or been subjected to worse problems spit, hoping to give It can bring help more or less, like a big brother who can give a little praise, if there are problems can discuss together the next.
Here we are finishing the last month of JS basis of summing up for the US Reviewing the Old.
I GitHub: github.com/Michael-lzg
JS gold booster dry-box and three silver four
JS summing (1) - Data type
JS summing (2) - Prototype Prototype chain
JS summing (3) - scope and closures
JS summing (4) - this point and Call / Apply / the bind
JS summing (. 5) - performs JS mechanism EventLoopd
HTML articles
common property meta
meta special properties, for the mobile terminal , may be provided according to need their own
7 numbers of the form: 1234567
figures in parentheses and the plus sign, form: (+ 86) 123 456 789
digital dual cable, the form: 00-00-00111
11 numbers of the form: 13800138000
Close to identify
Open copy the code identification 123456 copy the code mailbox identification (Android) Andrews mailbox format that comply with the identification string, we can not automatically identify the mailbox of the tube by the meta: copy the code in the same manner, we can also tag attributes press-mail address to open the pop-up messages sent functions:/ * Four sides * /
.setBorderAll {
position: relative;
&: After {
Content: '';
position: Absolute;
Top: 0;
left: 0;
width: 200 is%;
height: 200 is%;
Transform: Scale (0.5) ;
Transform-Origin: Top left;
Box-Sizing: Box-border;
border: 1px Solid # e5e5e5;
border-RADIUS: 4px;
}
}
copy the code mask user selection
user selection of the text or picture page
div {
-webkit- callout-Touch: none;
-webkit-User-SELECT: none;
-khtml-User-SELECT: none;
-moz-User-SELECT: none;
-ms-User-SELECT: none;
User-SELECT: none;
}
copy Clear the code input box shadow
on iOS, the default input block internal shaded to close this:
{div
-webkit-Appearance: none;
}
how saved copy prohibition or copy the code image
code is as follows
IMG {
-webkit-Touch-callout: none;
}
copy the code input box default font color
is provided inside the input placeholder font color
input :: - placeholder-INPUT-WebKit,
TextArea :: - {placeholder WebKit-INPUT-
Color: # c7c7c7;
}
INPUT: -moz-placeholder,
TextArea: {-moz-placeholder
Color: # c7c7c7;
}
INPUT: -ms-INPUT-placeholder ,
TextArea: {-ms-INPUT-placeholder
Color: # c7c7c7;
}
copy the code size set by the user to enlarge or reduce the error cause page layout
setting prohibition Font scaling
body {
-webkit-text-size-ADJUST:! 100% Important;
tEXT- ! size-adjust: 100% important ;
-text-size--moz ADJUST: 100% Important;!
}
copy the code generated in android element is clicked border
portion android system click on a link, there will be a semi-transparent gray frame or mask out different manufacturer-defined amount the effect is not the same. Removing the code below
A, Button, INPUT, TextArea {
-webkit-TAP-highlight-Color: RGBA (0,0,0,0)
-webkit-Modify-User: Read-Write-only-plaintext;
}
copy the code slide iOS not smooth
ios phone slides up and down the page will generate Caton, finger off the page, the page immediately stop exercising. Overall performance is not smooth sliding, no sliding inertia.
iOS versions 5.0 and later, the slide has two values auto definition and touch, the default value is auto.
solution
An increase in the rolling container rolling touch method
{.wrapper
-webkit-overflow-scrolling: Touch;
}
copy the code
set overflow
disposed external to overflow hidden, content elements provided overflow to auto. Internal elements beyond the body which produce rolling, the excess part of the body hidden.
{body
overflow-Y: hidden;
}
.wrapper {
overflow-Y: Auto;
}
copy the code js articles
moving end click screen generation 200-300 ms delay response
web page on the mobile device is 300ms delay, often result click the button clicks delay or even failure. solution:
fastclick can solve clicking on the phone event 300ms delay
zepto the touch module, tap the event but also to solve the problem of delays in the click of
Touch response sequence of events
ontouchstart
ontouchmove
ontouchend
onclick
audio and video automatically plays in andriod ios and
this is not a bug, because the Web page automatically play audio or video, will give users some confusion or unnecessary traffic consumed, so Apple and Android systems usually disable the automatic playback and use JS to trigger player must be triggered by the user before they can play. Join automatically trigger the code to play
$ ( 'HTML'). One ( 'touchstart', function () {
audio.play ()
})
Copy the code on iOS pull the pull-down blank border
fingers hold the drop-down screen, the top of the screen will be more a white area. Press and hold your finger on the screen, pull the bottom out of a multi-white areas.
In iOS, press and hold the screen and drag your finger up and down, it will trigger touchmove event. This event triggers the object of the whole webview container, the container will naturally be dragged, the rest will become blank.
Solutions
document.body.addEventListener (
'touchMove',
function (E) {
IF (e._isScroller) return
// stop the default event
e.preventDefault ()
},
{
passive: to false
}
)
copy the code conversion NAN issue date ios
the date format symbols replaced string '/'
'the MM-YYYY-dd'.replace (/ - / G,' / ')
Copy the code soft keyboard problems
IOS keyboard pop-up blocking original view
The mobile terminal can bounce by monitoring a software keyboard
for an element not within the visible area of the browser window to scroll the browser window visible region Element.scrollIntoViewIfNeeded (Boolean) method. If the visible region of the elements already in the browser window, scroll does not occur.
true, then the element will be centered in the visible region in their rolling zone.
false, then the element will be visible to its rolling area where the nearest edge region alignment. The top edge of which alignment elements visible region closest to the elements and the top edge of the visible region, or the elements will be aligned with the bottom edge of the bottom edge of the visible region.
window.addEventListener ( 'a resize', function () {
IF (
document.activeElement.tagName === 'the INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
the window.setTimeout (function () {
IF ( 'scrollIntoView Causes' in document.activeElement) {
document.activeElement.scrollIntoView (to false)
} the else {
document.activeElement.scrollIntoViewIfNeeded (to false)
}
}, 0)
}
})
copy the code and onKeydown onkeyUp compatibility
IOS keyboard events in the input keyup , keydown, etc. after the support is not very good, with monitor keyboard input keyup event, there is no problem in the Android mobile browser, but the input method using ios mobile browser, did not immediately keyup corresponding event
IOS12 click for difficult entry box focus, not bombs soft keyboard
positioning problem is to find fastclick.js compatibility IOS12, you can make the following changes in the source or main.js fastclick.js
= Function FastClick.prototype.focus (targetElement) {
var length
IF (
deviceIsIOS &&
targetElement.setSelectionRange &&
targetElement.type.indexOf ( 'DATE')! == 0 &&
targetElement.type! == 'Time' &&
targetElement.type! == 'month The'
) {
length = targetElement.value.length
targetElement.setSelectionRange (length, length)
targetElement.focus ()
} {the else
targetElement.focus ()
}
}
page useless fall away when copying the code IOS keyboard, a bottom blank will
scroll down time by monitoring the keyboard to its original position
window.addEventListener ( 'focusOut', function () {
the window.scrollTo (0, 0)
})
// input box pops up the soft keyboard input solutions.
document.body.scrollTop bfscrolltop = var
$ ( 'INPUT')
.focus (function () {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur ( function () {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})
copy code under IOS fixed failure causes
the soft keyboard evoke, fixed elements of the page is invalidated becomes absolute so when the page is more than one screen and scrolling, failure to follow the fixed element will scroll up. Not limited input type = text box, and all the soft keyboard (such as time and date selection, select selection, etc.) is aroused, will encounter the problem the same way.
Solution: do not let the page scrolls, but to the main part of their rolling, the main part of the height is set to 100%, overflow: scroll
