Shulou(Shulou.com)06/02 Report--

This article introduces the mobile H5 page development potholes, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Preface

In the usual H5 mobile development, we will inevitably encounter a variety of potholes, this article will take you to see how to solve, the article is long, it is suggested that the collection is convenient to consult later!

High energy ahead!

Canvas blurs on retina screen

Just scale the brush according to the pixel ratio

Run (canvasEl) {const canvas = canvasEl; const ctx = canvas.getContext ('2d'); const devicePixelRatio = window.devicePixelRatio | | 1; const backingStorePixelRatio = ctx.webkitBackingStorePixelRatio | | ctx.mozBackingStorePixelRatio | | ctx.msBackingStorePixelRatio | ctx.oBackingStorePixelRatio | | ctx.backingStorePixelRatio | | 1; const ratio = devicePixelRatio / backingStorePixelRatio; if (devicePixelRatio! = backingStorePixelRatio) {const oldWidth = canvas.width; const oldHeight = canvas.height; canvas.width = oldWidth * ratio Canvas.height = oldHeight * ratio; canvas.style.width = `${oldWidth} px`; canvas.style.height =` ${oldHeight} px`; ctx.scale (ratio, ratio);}}

Using the same proportion of the picture is very clear on the PC, but it is very blurry on the mobile phone. What is the reason?

After research, it is found that it is devicePixelRatio. Because the resolution of the phone is too small, if the web page is displayed according to the resolution, it will be very small, so Apple will display only 480320 of the 960640 resolution of iPhone 4 in the web page, so devicePixelRatio=2 Now android is messy, such as 1.5 android, etc. If you want the image to be displayed more clearly on the phone, you must use a 2x background image instead of the img tag (usually 2 times). For example, the width and height of a div must be 100100, and the background image must be 200200. Then the image displayed by background-size:contain;, is clearer. The code is as follows:

Background:url (.. / images/icon/all.png) no-repeat center center;-webkit-background-size:50px 50px; background-size:50px 50px; display:inline-block; width:100%; height:50px

Enable or disable the phone number in the automatic identification page

By default, the device automatically recognizes any string that may be a phone number. Setting telephone=no can disable this function, and setting not recognizing mailboxes and addresses is the same.

H6 problem with setting input to type=number on the website

There are generally three problems with setting type to number for H6 web page input:

The problem 1:maxlength property is not easy to use

Function checkTextLength (obj, length) {if (obj.value.length > length) {obj.value = obj.value.substr (0, length);}}

The problem 2:form is rounded by default when it is submitted.

/ / type=number in input usually generates an up and down arrow automatically. Click the up arrow to add a step by default, and click the down arrow to reduce the default step in step;number. The default step is 1, that is, step=0.01 allows you to enter 2 decimal places, and click the up and down arrows to increase and decrease 0.01 respectively. When used together with min, the value must be between min and max.

Question 3: some Android phones have style problems

The method to remove the default style of input:

Input,textarea {border: 0;-webkit-appearance: none; / / can also mask the strange inner shadow of the input box, solving the problem that the button style cannot be modified under iOS. The test also found that after adding this attribute, there are fillets by default under iOS, but you can modify it with the border-radius attribute.

Select drop-down selection setting problem

Question 1: right alignment implementation

Set the following properties

Select option {direction: rtl;}

Problem 2: disable select default arrowhead

::-ms-expand modify the form control drop-down arrow, set hidden and use background images to decorate select::-ms-expand {display:none;}

Mobile HTML5 audio autoplay failure problem

Since automatically playing audio or video from a web page will cause trouble or unnecessary traffic consumption to users, Apple and Android usually prohibit automatic playback and trigger playback using JS, which must be triggered by the user before playback. Solution: trigger playback and pause it through the user's touchstart touch (let the audio start loading), and then use JS to operate; solve the code:

Document.addEventListener ('touchstart', function () {document.getElementsByTagName (' audio') [0] .play (); document.getElementsByTagName ('audio') [0] .pause ();})

CSS animation page flashing white, animation stutter, picture confusion

Use composite attributes transform and opacity to design CSS3 animation as much as possible, instead of using position's left and top for positioning

Turn on hardware acceleration

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

Floating child elements open parent element box height (BFC)

The solution is as follows:

Parent element is set to overflow: hidden

The parent element is set to display: inline-block;, etc.

Both methods here are to change the parent element of the floating element into a BFC (block-level formatting context) element by setting the css attribute, so that the child element can support the parent element highly; however, it is best to use method 1, because the inline-block element itself will have some wide height to support itself.

Round trip caching problem

Clicking on the browser fallback sometimes does not automatically execute js, especially in mobilesafari; this has something to do with round-trip caching (bfcache), and the solution:

_ window.onunload = function () {}

Positioning pit

Under IOS, fixed positioning will fail when the soft keyboard is on top, so we use absolute instead of it when developing.

Audio element and video element playback problem in ios and andriod

Your browser does not support audio, write one / / audio, write two / / give priority to playing music bg.ogg, do not support playing bg.mp3

Ios phone cannot automatically play audio / video

This is because Apple's system limit does not allow automatic audio / video playback by default. You need to click to trigger the play () event to play it. Then we can trigger the playback event after the onload of the page:

Document.getElementById ('music') .play ()

Music can generally be played here, if not, it may be the restriction of Wechat.

Question 3: restrictions on Wechat

If it is the limit of Wechat, you need to call the Wechat API. The page first introduces:

Then JS writes to the Wechat event:

Document.addEventListener ("WeixinJSBridgeReady", function () {document.getElementById ('music'). Play ();}, false)

Summary:

The autoplay attribute of the audio element cannot be used on IOS and Android and is normal on the PC side.

When controls is not set for audio element, IOS and Android will occupy space size, while Chrome will not occupy any space on PC side.

Problem 4:Safari browser automatically plays

Document.addEventListener ('touchstart', function () {audio.play ();}, false)

Animation pause style (animation-play-state) is not supported on ios system

H5 pages generally have BGM, and also provide a rotating music icon for users to turn on and off music. We want the icon to stop rotating when the user clicks the music button, and then click the icon to continue the animation along the previous stop position; animation-play-state is the easiest way, but ios does not support it.

The current solution is: the music icon is responsible for running the animation, and the icon parent element is responsible for recording the rotation value when it stops.

Ios prevents long press page elements from being selected

Solution: adding styles can prevent users from copying, ios and general Android can solve the problem

-webkit-touch-callout:none; / / system default menu is disabled; page can be implemented because various operation windows pop up because of long press-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

After adding this code, there will be a problem on IOS, and it is found that the input box cannot enter content. The reason for this is the attribute-webkit-user-select:none;. The solution is to set the property of input in the css file at the same time, as follows:

Input {- webkit-user-select:auto; / / webkit browser}

How to solve stutter / slow when html5 encounters the scroll bar pulled up and down?

First of all, you may add height: 100% to the html and body of the page, and then it may cause the stutter problem of page sliding on the IOS.

The solution is: 1. Let html and body fix 100% (or 100vh), 2. Then put a div of height:100% inside, and set overflow-y: auto; and-webkit-overflow-scrolling: touch

Div such as .scroll-box {/ * mode box cannot be placed in this container, otherwise sometimes the mode box cannot be closed * / height: 100%; overflow-y: auto;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}

Click on the element to generate the background or border how to remove it

The side effect of webkit-user-modify:read-write-plaintext-only; / /-webkit-user-modify is that the input method can no longer input more than one character} or a webkit-tap-highlight-color webkit-tap-highlight-color: rgba;}

The browser is backed up and not refreshed.

This situation has been encountered before, which is also mentioned here; it mainly happens in webview. When you click back, the page appears in cache rather than refreshed. In many cases, this is not what you expect. The solution is to use js:

_ window.onpageshow = function (evt) {if (evt.persisted) {document.body.style.display = "none"; location.reload ();}}

Onpageshow triggers every page load, whether it is loaded from the cache or normally, which is the difference between him and onload; persisted determines whether the page is read from the cache.

The situation where the placeholder text of input is on the upper side

The placeholder of input will be on the upper side of the text: line-height is set on the PC side equal to height can be aligned, while the mobile end is still on the upper side. The solution is to set css line-height:normal.

Transition clear splash screen

-webkit-transform-style: preserve-3d; / / sets how embedded elements are rendered in 3D space: preserves 3D-webkit-backface-visibility:hidden; / / sets whether the back of the converted element is visible to the user: hidden-webkit-perspective: 1000

Solve active pseudo-class failure

Top status bar background color

Apple-mobile-web-app-capable sets whether the Web application runs in full-screen mode; syntax: / / content is set to yesWeb application will be in full-screen mode

Note: unless you use apple-mobile-web-app-capable to specify full screen mode first, this meta tag will not have any effect; if content is set to default, the status bar will display normally; if set to blank, the status bar will have a black background; if set to blank-translucent, the status bar will appear black and translucent If set to default or blank, the page is displayed below the status bar, that is, the status bar occupies the upper part; the page occupies the lower part, the two are not blocking each other or are obscured; if set to blank-translucent, the page will fill the screen, in which the top of the page will be covered by the status bar (it will cover the 20px height of the page, while the Retina screen of iphone4 and itouch5 is 40px); the default value is default.

Ios area

Poor support for input keyboard events such as keyup/keydown/keypress in IOS

It is found that the input method of IOS (whether it is a third party or comes with it) can detect English or numeric keyup, but can not detect Chinese keyup. After entering Chinese, you need to click the back key to start the search; the solution is to use the oninput event of html5 to replace keyup, and achieve a keyup-like effect through the following code

The selection state of the input:checkbox or input:radio element has been modified, and the checked attribute has changed

The value of the input:text or textarea element has been modified, and the value attribute has changed

Modified the option of select element to uniformly use input snooping when the selectedIndex attribute changes

Document.getElementById ('testInput') .addEventListener (' input', function (e) {var value = e.target.value; / / e.target points to the element in the area where the mouse clicked during the execution of the event Beginners will think that the element bound by the current event is the element that the mouse clicked on. At this time, it is necessary to check whether there are any child elements inside the time-bound element. If there is an e.target pointing to this child element, if there is no e.target and this both point to the element bound by the event})

IOS keyboard letter input, default first letter capitalization solution

Set the following properties

/ / three attributes of input autocomplete: default is on, indicating whether to allow the browser to record the entered value automatically. You can add autocomplete= "off" to the input to close the record and keep the input secret; autocapitalize: automatic case; autocorrect: error correction

On the optimization of iOS and OS X-end fonts (font inconsistencies may occur on horizontal and vertical screens, etc.)

IOS browsers will reset the font size on the horizontal screen. Setting text-size-adjust to none can solve the problem on iOS, but the font scaling function of desktop Safari will fail, so the best solution is to set text-size-adjust to 100%.

-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; text-size-adjust: 100%

In some cases, non-clickable elements such as (label,span) listen for click events, which will not be triggered under ios.

In this case, you only need to add a line of css code to the element that does not trigger the click event.

Cursor: pointer

Ios has different support for time date ().

Var date = new Date ("2019-10-21")

Debugging found that 2019-10-21 is equivalent to 2019-10-21 00:00:00, that is, ios is calculated from 0 by default, and we do not need to set the following time, minutes and seconds to 00:00:00

Invalid iOS (safari) tag binding click event

IOS (safari) sometimes a tag binding click event is invalid, just add an empty onclick= "", such as:

Location.href Jump Page Blank in ios

One layer of location.href coat is solved by setTimeout!

SetTimeout (() = > {_ window.location.href = 'www.juejin.im'}, 0)

Bug solution when Keyboard pops up and Down

You can handle it uniformly in the created hook of App.vue.

Created () {this.handleFocusOut (); this.handleResize ();}, methods: {handleFocusOut () {/ / input after the focus is out of focus, the ios keyboard is closed, but the window resize is not triggered, causing the actual page dom to be still topped by the keyboard-misplaced document.addEventListener ('focusout', () = > {document.body.scrollTop = 0;}) }, / / listen for the resize event (triggered by the keyboard pop-up), then slide the input textarea element to the visual area and hide the specific element handleResize () {const clientHeight = document.documentElement.clientHeight Window.addEventListener ('resize', () = > {/ / determine whether the element of the current active is input or textarea if (document.activeElement.tagName =' INPUT' | | document.activeElement.tagName = = 'TEXTAREA') {setTimeout () = > {/ / Native method, scroll to the location to be displayed document.activeElement.scrollIntoView () }, 0);} / / resolve the problem that the fixed positioning element is pushed up after the keyboard pops up const bodyHeight = document.documentElement.clientHeight; const ele = document.getElementById ('fixed-bottom'); if (ele) {if (clientHeight > bodyHeight) {ele.style.display =' none' } else {ele.style.display = 'block';});}} about mobile H5 page development potholes are shared here. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.