Some compatibility issues with the mobile side

1. First we need to set the following code (written in the head tag) when using media:

<meta name= "viewport" content= "Width=device-width,maximum-scale=1,user-scalable=no"/>

Several parameters of this code are explained:

• Width = device-width: widths equal to the width of the current device

• Initial-scale: initial zoom ratio (default = 1.0)

• Minimum-scale: The minimum scale to allow the user to zoom (the default setting is 1.0)

• Maximum-scale: maximum scale allowed to be scaled by the user (default = 1.0)

• user-scalable: Whether the user can zoom manually (the default is no, because we don't want the user to zoom out of the page)

• 2, CSS Media query

  Specifies that the style sheet rule is used for the specified media type and query criteria. Set the display content under different size devices.

  1. @media  screen and  (Max-width: 960px) {
  2.     body{
  3.         background:  #000;
  4.     }
  5. }

  The above code describes the style when the screen is less than or equal to 960px. If the screen is less than or equal to 960px, its page background color is black.

• /* Compatible with Iphonex */
  -webkit-appearance:none;
  /*height:4em;*//*ios the height of the button does not accompany high automatic adjustment */
  /* Resolve compatibility issues with button on Android and iOS the display will be consistent */
  Input[type=button], Input[type=submit], Input[type=file],input[type=checkbox],input[type=radio], button {cursor: Pointer -webkit-appearance:none; }
  -webkit-border-radius:3px;border-radius:3px;
  /* For compatibility with input in Apple */

• input::-webkit-input-placeholder{color:red;}
  input::-moz-placeholder{/* Mozilla Firefox 19+ */color:red;}
  input:-moz-placeholder{/* Mozilla Firefox 4 to + */color:red;}
  input:-ms-input-placeholder{/* Internet Explorer 10-11 */color:red;}

  /* settings for placeholder colors in the form */

• Body {
  Padding-top:constant (safe-area-inset-top);/* is the height of the navigation bar + status bar 88px */ 
  Padding-left:constant ( Safe-area-inset-left); /* If 0*/&NBSP is not vertical,
  Padding-right:constant (safe-area-inset-right),/* 0*/  if not vertical;
  Padding-bottom: Constant (Safe-area-inset-bottom); /* For the height of the bottom arc 34px*/ 
  }
  @media only screen and (width:375px) and (height:690px) {
  Body {
  Background:blue ;
  }
  }
  /* Media query criteria for media query criteria for different screens */
• Prohibit copying, selecting text: Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;}

　　　　

　

Some compatibility issues with the mobile side