Mobile Phone Inherent Bug

  • On some phones, the fixed element disappears when scrolling

Use partial scrolling rather than full page scrolling

  • Click events cannot be triggered on some IOS devices

Add pointer:cursor to the element

  • Click events on IOS devices have a 300ms delay

One is to use fastclick.js (recommended). The second option is not to bind the click event, but to bind the TAP event. (This method will cause debugging difficulties during development, and tap triggering in simulation mode has a bug.)

  • On IOS devices, the fixed element changes position when the keyboard is up

There is no good solution, this should be avoided at the product design level (such as transition pages, etc.)

  • The bottom page moves as you slide over the popover

Swiper on popover for places that need scrolling, onTouchMove =”event.preventDefault()” for places that don’t.

  • On some IOS devices, the Scroll event is not triggered continuously

Tied to the TouchMove event, but still not triggered by the time the finger leaves the screen inertial swiping, if you really need fine control, consider iscroll.js

  • When the browser refreshes the page, it remembers the previous scroll bar position

This usually improves the user experience, but sometimes we need to disallow this kind of memory by adding the following two lines

history.scrollRestoration = 'manual'
window.onunload = (a)= > window.scrollTo(0.0)
Copy the code
  • H5 Video cannot play automatically

Can’t do it, can’t do it, can’t do it. This is mandated by the manufacturer to avoid stealing traffic. There are two methods: one is to avoid it from the product design level, and the other is to downgrade it to the user touch screen. There is no third way

Compatibility section

  • Array.prototype.sortMethods don’t work on some phones

The comparison function passed by the sort method should return a numeric value, not a Boolean. That is, you should use a – sign instead of a > or < sign

  • Object.assignMethods don’t work on some phones

See $.extend in jQuery to implement your own object merge method. Note that Babel only translates syntax, not apis, so there is a risk of incompatibility using any of these ES6+ apis. If Babel’s polyfill is introduced, don’t worry, otherwise you’ll need to polyfill yourself

  • CSS3 features (Flex layout, Transform, etc.) not supported

Prefix, prefix, prefix. Add prefix can not say 100% support, 90% or guaranteed, especially mobile terminal. Manual addition is not possible and can be handled using Autoprefixer with the build tool

  • 1 pixel problem

Here 1 pixel is not 1 logical pixel (i.e. CSS pixel), but 1 physical pixel, can be used to achieve the method of scaling, first set width: 1px, then use the media query according to different DPR scale different proportions, paste the implementation of less

.one-x { height: 1px; } .one-y { width: 1px; } @dpr: 1.5, 2, 3; @len: length(@dpr) + 1; .genScale(@n: 1) when (@n < @len) { @val: extract(@dpr, @n); @media (min-device-pixel-ratio: @val) { .one-x { transform: scaleY(1/@val); } .one-y { transform: scaleX(1/@val); } } .-fix-less-compiler-bug- { display: block; } .genScale(@n + 1); } .genScale();Copy the code
  • The problem of suction a top

If position: sticky is directly used on IOS, bind Scroll event on Android. (It should be mentioned that IOS scroll event trigger is not continuous, android support for sticky is not very good. So the above method is more scientific) attached to the model judgment code

const ua = window.navigator.userAgent.toLowerCase()
const isAndroid = /android/.test(ua)
const isIOS = /iphone|ipad|ipod/.test(ua)
Copy the code

Library & framework

  • JQuery ajax method to pass the data item problem

If the value of the data key/value pair is undefined, jQuery will not send this value directly. If the value is null, jQuery will send an empty string

  • Vue modifies the data object view without updating it

It’s not up to date, it’s not up to date, it’s not up to date. This website is also written. This has to do with how Vue monitors changes in data. Vue cannot detect new attributes of objects and array changes updated as vm.arr[index] = newVal. Can be triggered by the following methods

vm.arr = [ ...vm.arr ] vm.obj = { ... vm.obj }Copy the code

details

  • IOS area scrolling caton is not silky

Plus – its – overflow – scrolling: touch

  • On some phones, elements flash when clicked

Add -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

  • Hide scroll bar

Add ::-webkit-scrollbar{display: none}

— — — — — — — — — — — — — — — — — — — — — — — — — — — — I am the end of the line — — — — — — — — — — — — — — — — — — — — — — — — — — — —

That’s all for now, more updates in the future