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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.