4. Selection of mobile terminal development

4.1 Mainstream solutions of mobile terminals

  1. Making mobile scenarios alone (mainstream)
  2. Mobile compatibility for responsive pages (secondary)

4.2 Making mobile Scenarios alone (mainstream)

Usually, adding m (mobile) to the front of the domain name can open the mobile terminal. Check the device. If it is a mobile device, jump to the mobile page

4.3 Responsive Pages are compatible with mobile terminals

Change the style by judging the screen width to suit different terminals

For example, Samsung official website

Disadvantages: production is very troublesome, need to spend a lot of energy to adjust compatibility problems

5. Mobile terminal technology solutions

5.1 Mobile browser

Mobile browser is based on weKit kernel, so only webKit compatibility is considered.

In short, we can safely use H5 tags and CSS3 styles

And the browser private prefix just adds webKit

5.2 Initializing the CSS (Normalize.css)

normalize.css

Function:

  • Protects valuable defaults
  • Fixed a bug with the explorer
  • It’s modular
  • Have detailed documentation

CSS3 Box-sizing

  • Traditional mode width calculation: box width = CSS set width+border+pandding
  • CSS3 box model: box width =CSS set width contains border and pandding, so the latter two no longer support the big box
// Change box to CSS3 box, pandding and border are no longer big boxCopy the code

5.4 Special Styles

A {/* sizing: border-box; -webkit-box-sizing: border-box; */ -webkit-tap-highlight-color: transparent; /* Add this attribute to ios to customize buttons and input fields */ -webkit-appearance: none; Img,a {-webkit-touch-callout: none; }Copy the code