Ios and Android mobile browser adaptation issues summary

Problems & Solutions

1. Disable various operation Windows on iOS

body, html {

-webkit-touch-callout:none  }

2. Disable the font enlargement problem caused by iOS horizontal and vertical screen switching

body, html {      -webkit-text-size-adjust: 100%;

}

3. Remove the Transition screen

-webkit-transform-style: preserve-3d; / Sets how embedded elements are rendered in 3D space: keep 3D/

-webkit-backface-visibility: hidden; /(Sets whether the back of the converted element is visible from the user: hidden)/

4. When you enter English using the Chinese input method in iOS, one sixth of a space may appear between letters

Value = this.value. Replace (/\u2006/g, “);

5. Disable text selection for ios and Android users

body, html {

-webkit-user-select:none

}

6. On ios and Android,audio and video elements cannot be played automatically

Trigger event call => Audio-play () or video.play()

7.CSS animation page flashes white and animation freezes

1. CSS3 animation should be designed using the synthetic properties transform and opacity whenever possible, instead of using the left and top of position for positioning

-webkit-transform: translate3D (0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

8. Translucent gray masks appear on touch elements on ios and Android

Element {-webkit-tap-highlight-color:rgba(255,255,255,0)} set alpha to 0 to remove the translucent gray mask.

9. The rounded bug

=> background-clip: padding-box;

10. Mobile js compatible writing method

Document.getelementbyid (‘div’). Style =”height:100px”

Document.getelementbyid (‘div’).setattribute (‘style’,’height:100px’)

Case 2 = > const arr = [1, 2, 3]

Arr.foreach ((item)=>{console.log(item)})

For (let I = 0,len = arr.length; i < len; i++){console.log(arr[i])}

11.IOS Safari layout cannot be fully loaded after switching from portrait to landscape (default full screen when landscape is switched to portrait, default bottom bar disappears in Safari by default when landscape is switched to portrait, and then click to appear portrait layout cannot be fully loaded again)

Use fixed layout for the first DOM node in the body =>

.firstElement{

position: fixed;        top: 0;        bottom: 0;        left: 0;        right: 0;        width: 100%;        height: 100%;        overflow: hidden;

}

Fixed elements in ios are prone to positioning errors. When the soft keyboard pops up, fixed elements in Android perform better than those in ios. When the soft keyboard pops up, fixed element positioning is not affected. The iScroll plug-in is available to solve this problem

12. Resolve the abnormal VH unit of the mobile browser

When defining the height of an element in vH units for a responsive layout, it was found that in Chrome and Firefox browsers on mobile, the element was displayed incorrectly in the browser URL bar.

The reason is that the definition of 100vh by the browser on the mobile terminal does not consider the height of the URL bar (whether the URL bar is displayed or hidden). The following figure can be used to intuitively reflect the problem:

The left side is the desired “full screen” height of 100vh, but the right side is the “full screen” height of the URL bar, 100vh at this point has exceeded the “full screen” height.

Solutions are as follows:

1. The best solution is the project: after the JS performs the initialization of vhCheck(), 100vh can be corrected directly with the CSS variable –vh-offset.

Usage:

1. npm install vh-check

2. import vhCheck from ‘vh-check’

vhCheck()

3. main {

height: 100vh; /* Compatible with browsers that do not support var variables (<= IE11) */

height: calc(100vh – var(–vh-offset, 0px)); /* Revised 100vh */

}

2. Set the body and HTML height of the root node to 100%, and then set the child nodes’ height to 100%

Cases of HTML:

css:

body , html {

height:100%;

}

.container{

height:100%;

}

13.IOS mobile QQ browser hijacked the video tag to play video and can not be closed unless the page is refreshed (big pit)

Muffinman. IO /html-canvas… .

14. The blue background color will appear when you click on the picture in Firefox

Img {background-color:transparent; }

Making animations with the left might not be smooth for Kaka

Solution: Use translate3D for animation.

16. Streaming layout

/ parent/display: flex; align-items: center; justify-content: center; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: flex-start; / child/flex: auto; flex: none;

17. How to solve the problem of hover on mobile terminal?

Use :active instead of direct solution, the fastest.

18. Vue,nuxt project if the default router:{mode:’history’} is deployed to an online environment switch to a subroute refresh 404 problem

Solution:

1. The server configuration www.cnblogs.com/tugenhua070…

2.router:{mode:’hash’}

3. The server establishes the Node environment

19. Js listens to the event of orientationChange triggering the document may not complete rendering and the delay is about 300ms, so only the page layout is delayed. Do not delay the solution

Solution: Use CSS

// @media screen and (orientation: portrait) {}

// @media screen and (orientation:landscape) {}

20. Flex layout child element invalidation on earlier versions of Android phones in context-content :space-between

First check whether the child element is a block element, if not set display:block to solve the problem

How to solve the problem that the browser of the older version of mobile phone does not have line wrapping?

Text-align :center; text-align:center; The child element sets display:inline-block.

5. An anti-aliasing tool for your smoothing font icon

[class^=”svg-icon-“], [class*=” svg-icon-“] { text-rendering: auto; -webkit-font-smoothing: antialiased; }

23. Digital badge automatic elongation technique from circle to oval

.round {        background-color: #28a745;        min-width: 18px;        height: 18px;        line-height: 18px;        text-align: center;    }

24. When the scroll bar in the frame rolls, the external body also rolls

Solution: Set the body position to Absolute when the box pops up. top:0; left:0; 41

25. Mobile terminal approximately solves 1-pixel border problem (pseudo-class + Transform implementation)

Personally, PSEUDO-class + Transform is the perfect method. The principle is to remove the border of the original element, then use :before or :after to redo the border, and reduce the scale of the transform by half. The original element is positioned relative to the original element, and the new border is positioned absolutely.

Single border style set:

.scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ”; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; – its – transform: scaleY (0.5); The transform: scaleY (0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } Four boder style Settings:

.scale-1px{ position: relative; margin-bottom: 20px; border:none; } .scale-1px:after{ content: ”; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; – its – transform: scale (0.5); The transform: scale (0.5); -webkit-transform-origin: left top; transform-origin: left top; } It is best to judge the Retina display before use, combined with JS code:

if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector(‘ul’).className = ‘scale-1px’; } advantages:

1. All scenarios can be met

2. Support rounded corners (border-radius is required for both pseudo-classes and ontology classes)

Disadvantages: For elements that already use pseudo-classes (such as Clearfix), multiple layers of nesting may be required

26. Fix the ios browser rubber band effect

Document. The body. The addEventListener (‘ touchmove ‘, function (e) {e.p reventDefault () / / stop the default approach (the effect of the slide block drop-down)}, {passive: False}) // Passive cannot be omitted. It is compatible with ios and Android

Add TouchMove.stop to the area where you want to scroll

27.H5 Eliminates transition splash screen on ios mobile devices

.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }

28. Html5 +CSS forbids IOS long press copy and paste implementation

-webkit-user-select:auto; -webkit-user-select:auto; / *{ -webkit-touch-callout:none; / the system default menu is disabled / -webkit-user-select:none; /webkit browser / -khtml-user-select:none; / early browser / -moz-user-select:none; / firefox / -ms-user-select:none; /IE10/ user-select:none; } input,textarea { -webkit-user-select:auto; /webkit browser/margin: 0px; padding: 0px; outline: none; }

29. Mobile CSS forbids saving images

img { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }

30. CSS implements thick and thin lines in the middle

&::after { content: ”; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: -webkit-linear-gradient(left, #000 -4%, #e6e6ff 50%, #000 100%); }

30. Audio currentTime The mobile phone is invalid

So if you want to set currentTime, if you want to set it to play, you can do this

audio_player = $(‘#auplayer’)[0]; audio_player.play(); audio_player.pause(); audio_player.currentTime = 52; audio_player.play();