Mobile development manual

Mobile device adaptation

• Mobile end adaptation plan

  • postcss px->vw
  • rem

• amfe-flexible

  • rem

Common knowledge points on mobile

Horizontal and vertical screen

• Discuss the best realization of judging horizontal and vertical screens✳️

  • @media media inquiries
  • window.matchMedia / matches
  • window.innerHeight >= window.innerWidth
  • window.orientation(rotation angle: 0/90/-90/180)
  • screen.width / screen.height

Layout plan

• Common layout of mobile terminal

webapp development

• H5 Arouse APP

  • URL Scheme
  • chrome >=25 Android: intent
  • ios >=9 IOS: unilink
• [JSBridge]()

Mobile compatible

• mobile terminal player

  • H5 video problem
  • Handwriting player

Mobile test

• Mobile terminal real machine debugging guide

  • IOS: iPhone Open Web Inspector (Settings -> Safari -> Advanced -> Open Web Inspector)
  • Andriod: mobile phone enters developer mode
  • chrome remote debugging webview
  • Agent tool debugging: charles / Weinre

Mobile terminal incurable diseases

Video problem

Mobile practice

• WeChat Development Manual

  • Audio and video playback
  • Custom sharing
  • Generate Mini Program QR Code
  • WeChat built-in browser to clear cache

• Custom mobile terminal player

  • Mobile H5 player compatible
  • Full screen/non-full screen custom player
• swiper realizes special-shaped scrolling