In the company, I participated in a mixed development project of native APP and h5. I was responsible for the h5 part of the project. I will summarize the problems encountered in the project as follows:
specific questions Question 1: Page scroll bar problemProblem description
The web page has scroll bars when browsing on a PC browser; however, when it is opened on a mobile browser, there is no scroll bar.
Solution
Set the outermost layer of the page (when I write a page, I usually write a large container in the body tag to store the content of the page); set overflow:auto/scroll; and cannot set the value of the height attribute (height:100% No way either)
example
<body> <div style=overflow:scroll/auto;> //Web page 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 to achieve interactive effects, the problem of event triggering failure occurs on some mobile phones [for example: low-version Honor mobile phones]
Solution
Method 1: Use removeEventListener and addEventListener together
Method 2: Add e.preventDefault(); to prevent some mobile phones from jumping by default
Method 3: Jquery’s on implements event binding
Note: Method 1 and Method 2 are both native JS using addEventListener to implement event listening; and when the dom element uses touchstart and touchend events, it needs to be used in conjunction with event binding or event listening, otherwise the js part will throw an exception.
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: Long press crash issueScenario restoration
There is a XXX list page. When long-pressing a list item on the list page (touching text), a crash will occur on low-version mobile phones.
Solution
js part: add e.preventDefault(); when the event is triggered to prevent the default behavior
css part: add code that prohibits copying of text
code
//js part: e.preventDefault(); //css part: -webkit-touch-callout: none; //Solution to crash //Disable copying -moz-user-select: none;-khtml-user-select: none;user-select: none;Question 4: Problem with 1px on mobile terminal
Problem description
Since different phones have different pixel densities, 1px in CSS is not equivalent to 1px on mobile devices. In the project, js and rem are used for mobile screen adaptation, so a 0.5px situation occurs, resulting in the lower version of the mobile phone not being able to display the 0.5px border.
Solution
Use css to solve the 1px problem, and directly write: border-width:1px; to the dom element that needs to be set to 1px;
code
//HTML part: <div class='class1'></div>//css part: .class1{ border: 1px solid #ccc;}//css part/*Problem with normal display of 1px on the mobile terminal 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); } }}/*The problem of normal display of 1px on the mobile terminalend*/ Problem 5: js cannot correctly parse the parameter value of the url containing = signProblem description
In the project, because the parameter value of the data request is obtained from the url address, and the parameter value contains the = sign, the parameter value cannot be correctly parsed (ps:js uses the = sign to separate the parameters of the url)
Solution
Transcode the url and then decode it [In this project, the APP provides the transcoded url address, and the front-end uses the geturlparams plug-in to obtain the parameter value of the url address]
code
//Decode = number dom.token = decodeURI($.query.get(token)); //Plug-in //Get the value without decoding dom.msgid = $.query.get(msgid);Question 6: Native js event listening and jquery event binding are 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
Do not use body and document elements as parent elements
Question 7: Date is displayed as NaN in iosProblem description
The date format of Date has compatibility issues in ios. The date in ios will be displayed as: NaN
Solution
Solution: 2017/12/26 19:36:00 is supported in ios, but 2017-12-26 19:36:00 format is not supported. The latter format displays Nan in ios (it can be displayed normally in Android) )
code
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//Convert the '-' in the time format to '/' format, compatible with iOSQuestion 8: There is a problem with click event in ios
Problem description
When the click event is triggered by an iOS click, the parent element module of the event delegation will be selected [that is: due to event bubbling and the parent has a default style], and there will be a transparent layer, for example
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ul>
Analysis: For example, when an iOS user clicks list item 1, the UL of the parent layer will have a transparent style.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.