Summary of mixed html5 and APP development problems, html5app
Background
I am in charge of the h5 part of the native APP and h5 hybrid development project in the company. The problems encountered in the project are summarized as follows:
Question
Question 1: Page scroll bar
Problem description
The web page has a scroll bar when browsing on the PC browser. However, when the mobile browser opens, there is no scroll bar.
Solution
Set overflow: auto/scroll to the outermost layer of the page (I usually write a large container in the body label to store the page content; you cannot set the value of the height attribute (neither can the value of height: 100%)
Example
<Body> <div style = "overflow: scroll/auto;"> // webpage content </div> </body>
Question 2: Use of touchstart and touchend events
Problem description
When the touch. js file is introduced and the touchstart and touchend events are used for interaction, some mobile phones may fail to trigger events [for example, honor phones of earlier versions]
Solution
Method 1: "removeEventListener" and "addEventListener"
Method 2: add e. preventDefault () to prevent some mobile phones from redirecting by default.
Method 3: Jquery's on implementation event binding
Note: method 1 and method 2 are native. JS uses addEventListener to implement event listening. When dom elements use touchstart and touchend events, they must be used together with event binding or event listening, otherwise, an exception is thrown in the js part.
Code
// Method 1: document. getElementById ('list5 '). addEventListener ('touchstart', callback, false); document. getElementById ('list5 '). removeEventListener ('touchstart', callback, false); document. getElementById ('list5 '). addEventListener ('touchend', callback, false); document. getElementById ('list5 '). removeEventListener ('touchend', callback, false); // Method 2: document. getElementById ('list5 '). addEventListener ('touchstart', function (e) {e. preventDefault () ;}, false); document. getElementById ('list5 '). addEventListener ('touchend', function (e) {e. preventDefault () ;}, false );
Question 3: the problem of long-shift crash
Scenario Restoration
There is a XXX list page. When you long press the list items on the list page (touch the text), there will be a crash in the lower version of the phone
Solution
Js part: add e. preventDefault (); when an event is triggered to prevent default behavior.
Css section: Add code to prohibit text copying
Code
// Js part: e. preventDefault (); // css part:-webkit-touch-callout: none; // solve the problem of flashback // prohibit copying-moz-user-select: none; -khtml-user-select: none;
Question 4: 1px problems on mobile terminals
Problem description
Because different mobile phones have different pixel density, 1px in css is not equal to 1px in mobile devices. In the project, js and rem are used for mobile screen adaptation. Therefore, 0.5px is generated, so that mobile phones of earlier versions cannot display the PX border.
Solution
Use css to solve the 1px problem, and directly write: border-width: 1px for dom elements that need to be set to 1px;
Code
// HTML part: <div class = 'class1'> </div> // css part :. class1 {border: 1px solid # ccc;} // css part/* normal display of 1px on the Mobile End start */% border-1px {display: block; position: absolute; left: 0; width: 100%; content :'';}. border-1px {position: relative; &: after {@ extend % border-1px; bottom: 0; border-top: 1px solid # ccc;} &: before {@ extend % border-1px; top: 0; border-bottom: 1px solid # ccc; }}@ media (-webkit-min-device-pixel-ratio: 1.5 ), (min-device-pixel-ratio: 1.5 ){. border-1px {&: after {-webkit-transform: scaleY (0.7); transform: scaleY (0.7 );}}} @ media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2 ){. border-1px {&: after {-webkit-transform: scaleY (0.5); transform: scaleY (0.5) ;}}/ * mobile client normal display 1px problem end */
Problem 5: js cannot correctly parse the parameter value containing the "=" sign in the url
Problem description
Project, because the parameter value of the data request is the parameter value obtained from the url address, and the parameter value contains the "=" number, it cannot be correctly parsed to the parameter value (ps: js uses "=" to separate url parameters)
Solution
Transcode the url and decode it. [In this project, the APP provides the transcoded url address. The frontend uses the geturlparams plug-in to obtain the url address parameter value]
Code
// Decodes the "=" # dom. token = decodeURI ($. query. get ("token"); // plug-in // get the dom without decoding. msgid = $. query. get ("msgid ");
Question 6: Native js event listening and jquery event binding become invalid in ios
Problem description
When using event listening or event binding, the event triggering in ios is invalid because the parent element selects the body or document element.
Solution
The body and document elements are not used as parent elements.
Question 7: The date displayed in ios is NaN
Problem description
Date format, which has compatibility issues in ios. The Date displayed in ios is NaN.
Solution
Solution: in ios, the "19:36:00" format is supported, but the "19:36:00" format is not supported. In the latter format, Nan is displayed in ios (it can be displayed normally in Android)
Code
Var time = "19:36:00"; time = time. replace (//-/g, "/"); // convert the '-' in the time format to the '/' format, compatible with iOS
Problem 8: The click event has a problem in ios
Problem description
When a click event is triggered in ios, the parent element module of the event Delegate is selected (that is, because the event is bubbling and the parent has a default style), and there is a transparent layer, such
<Ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul>
Resolution: for example, when an ios user clicks "list item 1", the ul of the parent layer has a transparent style.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
