Article From:https://www.cnblogs.com/xiaohuochai/p/8955331.html

In front of the words

  This article will detail the common problems in mobile web development.

 

Input

【Cursor color]

  By default, the cursor color is the same as that of the font color color, but it can also be set separately by the caret-color attribute.

caret-color: auto;
caret-color: transparent;
caret-color: currentColor;
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

  However, the cursor of IOS does not support caret-color, which is independent of font color and is purple blue by default. So, try not to set the blue or purple background, otherwise the cursor will not see clearly.

【The height of the cursor]

  inputThe cursor height of the field is the same as that of the row height line-height, so do not set too high row height. You can set up the height by setting up and down padding.

【Magnification]

  IOSNext, input will zoom in when it gets the focus. Meta set user-scalable=no to cancel the magnification effect.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">

【Automatic capitalization]

  In general, IOS automatically opens the first letter of the keyboard by automatically capitalizing, so that when you enter English, the initials will be automatically capitalized.

The uppercase

  But sometimes, I don’t want to be always capitalized first. For example, the user name field, if the field itself is case sensitive, the initial automatic capitalization will often cause users trouble. Can be set by setting on the form elementautocapitalize="off"To shut down

<input type="text" autocapitalize="off">

【Round angle]

  IOSNext, when the input field shows only the bottom border, there will be two bottom rounded corners, and border-radius:0 can be set.

border-radius:0

【Auto save]

  inputThe domain automatically opens the auto save function, and you can use the autocomplete= “off” attribute to turn it off.

<input autocomplete="off" />

  It should be noted that if you use the react framework, you need to replace autocomplete with autoComplete.

【Contours outline]

  androidBrowsers, when the input domain is in focus, will have a pale yellow outline outline effect by default.

  It can be removed by setting outline:none

outline: none

【Virtual keyboard]

  IOSThe pop up virtual keyboard does not affect the size of the viewport area, while the Android phone pops up the virtual keyboard. Therefore, it is better to set the height of the page containing the input field as fixed.

  When the page is initialized, get the page height

// app.js
  componentDidMount() {
    const { setWrapSize } = this.props
    const { clientHeight, clientWidth } = document.documentElement
    setWrapSize({ clientHeight, clientWidth })
    window.addEventListener('orientationchange', this.setSize)
  }

  Then, through the inter line style, set this height to the page that contains the input field.

// BaseFullScreen
<Wrap className={className} style={{ height: `${wrapHeight}px` }} {...rest}>{children}</Wrap>

 

style

【Click the background

  On the mobile side, when clicking on clickable elements, there will be a pale blue background under Android, and a gray background will appear on IOS.

bg

  You can cancel the background effect when clicking through the setting of -webkt-tap-hightlight-color property.

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

【appearance】

  Appearance:none is used to remove the built-in style of the medium browser in the form elements, such as removing forked forked of the data type input domain, removing the up and down arrows of the number type input domain, and so on

-webkit-appearance: none;

【Prohibition

  Sometimes users are not expected to choose text on the website, perhaps for copyright reasons, such as e-book website. JS is usually used to implement

  Another option is to set -webkit-user-select to none.

-webkit-user-select:none;

【Prohibition of text scaling

  On some phones, the font will be scaled when the horizontal screen is switched. The following settings can be used to prohibit text zoom

* {
  -webkit-text-size-adjust:100%;
}

【Text rendering]

  Using the text-rendering:optimizeLegibility property, it allows the browser to focus on readability rather than rendering speed and geometric accuracy when drawing text. It will make the word space and connection valid.

text-rendering: optimizeLegibility;

  This property will cause more obvious performance problems on mobile devices.

【Text smooth display]

  -webkit-font-smoothingProperties can be used to control whether the pixel display of the font is smooth.

none Close the anti aliasing, and the edge of the font is sharp.The antialiased font is pixel level smooth, which makes the text look thinner on the dark background.Subpixel-antialiased Font subpixel smoothing, mainly for better display in non retinal devices.
body { -webkit-font-smoothing: antialiased; }

【Contours outline]

  input、textareaWhen the focus is on the form labels, there will be a pale yellow outline outline in the Andriod system, which will be removed by outline:none.

outline: none

【placeholder】

  placeholderThe default is light grey. If the input domain is a light gray background, then the text of the placeholder is close to the background color and can not be clearly displayed. The color of the placeholder needs to be set.

  Can be set up by pseudo elements

::placeholder {
    color: #fff;
  }

【Clear the corner of the button.

input,button{
  -webkit-appearance:none;
  border-radius:0;
}

【Rolling rebound]

  -webkit-overflow-scrolling Does the attribute control element use rolling resilience on mobile devices?

auto Using normal rolling, when fingers move away from the touch screen, the rolling will stop immediately.Touch uses a rolling effect with springback. When fingers move away from the touch screen, the content will continue to have a rolling effect for a period of time. The speed and duration of rolling and the intensity of rolling gestures are positive.Ratio. At the same time, a new stack context will be created
body {
  -webkit-overflow-scrolling: touch;
}

  Be sure to set this property, otherwise there will be a partial rolling bug in IOS.

【1Doubling high]

  When line-height:1 is set, when the height is 1, some pages will appear incomplete text display, so the height setting must be greater than 1.

 

1Pixel border

  Because of the reason of retina screen, the border of 1px will be displayed as two physical pixels, so it looks very rough. This is a common problem in mobile terminal development.

  There are many solutions, but each has its own merits and demerits.

  1、0.5px Frame

  Since iOS 8, the iOS browser supports 0.5px’s border, but it is not supported on Android, and 0.5px will be considered 0px, so this method is poorly compatible.

  2、background gradient

  CSS3 With gradual change background, border of 1px can be implemented through gradual background. The principle is to set the gradual background of 1px, 50% to have color, and 50% to be transparent.

@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}
@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}

  3、Pseudo class + transform

  The implementation of this method is to set the height of the pseudo element to 1px, and then use transform to reduce it to the original half.

div {
  position: relative;
  &::after {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    transform: scaleY(.5);
    content: '';
  }
`

 

layout

【vh】

  When VH controls the height of the page, when the virtual keyboard pops up, the viewport height changes, so that the value of VH changes.

// Normal mode
100vh = document.documentElement.clientHeight;

// An Zhuoduan pops up a virtual keyboard
100vh = document.documentElement.clientHeight - The height of the virtual keyboard;

  This situation results in the fact that when the virtual keyboard pops up, the size of the VH fixed elements in the page is compressed, resulting in misplacement of the layout and overflow of text.

  Therefore, it is better to set the height of the page containing the input field as fixed.

【100%And 100vh]

  100vhRefers to the viewport, which is 100% of the screen height. It includes not only the visual height of the browser, but also the height of the browser address bar. And the 100% height is 100% of the page height.

  So, in full screen, 100vh equals 100% height, otherwise 100vh is higher than 100%.

【Highly invalid]

  Under IOS, set height:100%. If the parent’s flex value is 1 without setting the specific height, the 100% height setting is invalid.

  The processing method is to set the specific height height at the parent level by computing, such as height: Calc (100% – 100px).

 

Event

【Mouse event]

  Because there is no mouse in the mobile device, there are some differences with the computer terminal.

  1、The dblclick double click event is not supported. Double click the browser window in the mobile device to enlarge the screen.

  2、The click element triggers the MouseMove event

  3、When two fingers are placed on the screen and the page rolls along with fingers, it will trigger mousewheel and scroll events.

【touchEvents]

  The new version of chrome does not support setting touch events directly to document and body, so the following code is invalid.

document.addEventListener('touchstart', function(e) {
  e.preventDefault();
})

 

picture

【SVG】

  SVGDue to the nature of its vector, the image is not distorted, and the amount of code is small. But in the process of using, there are some points to note.

  1、Add SVG in the pseudo class and do not display the SVG under the IOS

  2、Add SVG to the page. In WeChat’s Android, there will be some transparency opacity elements that are not displayed, so try not to set up transparency.

  3、Set SVG in the mask attribute, and transform the color to SVG by background-color.

【base64】

  We should pay special attention to the fact that after changing the base64 format, the query string will be added.

【Caching]

  The mobile end changes the same name picture to be unable to clear the cache. So, you still have to make an article on the name of the picture

 

meta

【shrink-to-fit=no】

  IOS9+Under the system, the use of Viewport yuan to mark “width=device-width” causes the page to shrink to fit the contents of overflow viewport boundaries. You can override this behavior by adding “shrink-to-fit=no” to the meta tag, and the added value will bePrevent page scaling to adapt to the viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,shrink-to-fit=no">

【Page zoom]

  In the meta tag, no scaling user-scalable=no is set up, which can amplify the forbidden effect in the input domain focus state under IOS. However, it is still impossible to prevent the overall scaling of the page

 【Recognition rule]

  1、Phone

<a href="tel:0755-10086">Phoning:0755-10086</a>

  2、Send message,winphoneSystem null and void

<a href="sms:10086">Send messages to:10086</a>

   3、Jump to the map

<a href="iosamap://viewMap?sourceApplication=yukapril&poiname=Guohong Hotel & lat=39.905592& lon=116.33604& dev=0">GAD map < /a>< a href="androidamap://viewMap?sourceApplication=yukapril&poiname=Guohong Hotel & lat=39.905592& lon=116.33604& dev=0">GAD < /a>

  4、Write mail

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

  5、Prohibition of recognition

<meta name="format-detection" content="telephone=no,email=no,address=no"/>

【Reptiles]

   robots(Web search engine index): correspondenceA set of commas(,)The value of the split, usually value:

none:The search engine will ignore this web page, which is equivalent to Noindex and nofollow.Noindex: search engines do not index this page; nofollow: search engines do not continue to search other web pages through the link index of this web page.All: the search engine will index thisThe web page index is equal to index and follow through the link index.Index: search engine index this page; follow: search engine continues to search other web pages through the link index of this web page.

  Using the following code, the web page will be ignored by the search engine.

<meta name="robots" content="none"/>

【Add to the main screen

  Under IOS, at the bottom of the head element, you can use the following code to add functions to the main screen.

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Weather PWA">
  <link rel="apple-touch-icon" href="images/icons/icon-152x152.png">

【QQBrowsers]

// Full screen mode
<meta name="x5-fullscreen" content="true">
// Forced vertical screen
<meta name="x5-orientation" content="portrait">
// Forced horizontal screen
<meta name="x5-orientation" content="landscape">
// Application mode
<meta name="x5-page-mode" content="app">

【UCBrowsers]

// Full screen mode
<meta name="full-screen" content="yes">
// Forced vertical screen
<meta name="screen-orientation" content="portrait">
// Forced horizontal screen
<meta name="screen-orientation" content="landscape">
// Application mode
<meta name="browsermode" content="application">

 

Leave a Reply

Your email address will not be published. Required fields are marked *