When you click the drop-down box in the built-in WeChat browser and the page jumps to the iphone, what should you do? Jump to the iphone

Use a built-in browser to click the drop-down box and the page jumps to the iphone. What should I do? Jump to the iphone

Read more: how to pay for H5 pages with built-in browsers

Scenario reproduction:

While happily packing up and preparing for work, the girl in the test department ran to raise a bug: "under the iphone, click the drop-down box and the page jumps out of order, android does not have this problem. The jump page is just a few pages in the bottom menu ." Because the project is urgent, the small Editor can only stay and solve the problem. After the test again, I checked the possible causes one by one (the official version and the test version code are inconsistent, the page HTML code is disordered, And the css code is incorrect), but none of them solved the problem. How can a simple select problem occur? Think twice about it. (The root cause of the problem has not been found yet)

The root cause of the problem cannot be found. check whether there is a solution first. After multiple debugging, capture the select action and find a solution. The principle is simple: Use div to simulate select.

Solution:

The idea is also clear. There are two html structures in the page. One is that the select Code is written as usual (display: none at the beginning), and the other is the simulated div (displayed at the beginning ), when you click div, a select drop-down box is displayed, and the read option value is sent to the simulated div. The simulated core code can be downloaded to VisualSelect. js

Html code

<Div class = "visualSelect"> firm </div> <select class = "round" style = "display: none; "> <option value =" 1 "> state stocks </option> <option value =" 2 "> firm </option> <option value =" 3 "> others </ option> </select>

Css code

.round { border-radius: 4px;}.visualSelect { width: 100%; padding: .45rem .5rem .25rem .75rem; margin-bottom: .875rem; border: 1px solid #ddd; border-radius: 4px; color: #bbb;} 

Js Code

Note: Because this problem only exists in some iPhones, there is no problem with the android phone, so it is best to determine the model.

Var agent = navigator. userAgent; if (agent. indexOf ("iPhone")>-1) {$ ("select"). VisualSelect (); // call the plug-in}

PS: bootstrap rolling listening is sometimes effective on the iPhone's built-in browser.

Bootstrap writes an additional affix navigation bar (navigation bar on the left, data on the right, divided into two columns), and it is normal to perform a rolling listening on the built-in browser of the Android mobile phone, however, the built-in browser of the iPhone can sometimes listen and sometimes cannot listen. Why?

Solution:

This is because the web pages written in HTML5 are not responded to in time by the iPhone. It is best to use jQuery mobile.

Articles you may be interested in:

• How to determine the built-in browser (implemented through User Agent)
• Javascript restricts webpage access only in Built-in browsers
• Web browser built-in JavaScript Object WeixinJSBridge instance
• Introduction to WeixinJSBridge with built-in browser private interface
• How to Implement H5 page payment with built-in browser