Mobile development encounters the Pit

Now the front-end developers basically have to start at the same time the PC-side page and mobile page development work, in the current situation, mobile phone page compatibility than the PC is more complex (of course, mainly in the Android side, we understand), and some styles on the PC side of the page may be nothing, but once to the mobile phone page , it may be "Tai Hang", the following is my own development of mobile phone page summary of some of the problems, to avoid the future to commit.

1.overflow-x

This is really a big pit, once you use this property in the body or HTML, sorry, if your page appears scroll bar, then there will be inexplicable bug, sliding page when fix in the top or bottom will block, do not know someone encountered such a situation did not, I was met, pit dead. (Of course the reason is not known, have the hope of knowing)

Workaround: HTML and body do not use this property, if you do not want to let the horizontal scroll, use Overflow:hidden;overflow-y:auto;

2.calc ()

This is the new method in the CSS3, it is actually very cool, but Android does not support, we'd better not use, unless you do not consider Android users.

3.display:fix

This is CSS3 's new property, used to make the elastic layout, iOS is very ok, but Android does not support, in order not to be pits, do not use.

4.-webkit-overflow-scrolling:touch

This property is not a pit, he is used to make the scroll bar on the iOS smoother smooth, pro-Test no big changes on Android, but iOS has, not a pit, in order to enhance the user experience, you can use, to the appearance of the scroll bar label added this style.

The HTML () method in 5.jQuery

If the type of input is tel type, then you use the HTML () method to take out a value to fill in the input, this input will appear on Android phones such as "<a href=" faketel:**** "></a>" Similar character channeling, the solution is to use the text () method to take this value and then fill in the input, white or HTML () with the text () method is not the same, the HTML () method takes the content of HTML, not plain text, and the text () method to take out the plain text, Will not be parsed by the browser, is a lesson!

Let's summarize these for the time being, and add them slowly later!

6.keyup and KeyDown expire on iOS devices

If you use the third-party input method on the iOS device is unable to use the KeyUp event to listen to, because the iOS system has done a blocking mechanism, the third-party input method of the event system is no matter, then we can change the idea, to listen to input value change event, the replacement scheme is as follows:

[JavaScript]View PlainCopy

1. $ (' #input '). Bind (' input propertychange ', function () {
2. Alert ("....")
3. });

7. Add Position:relative to Body

For example, to the mobile page to do a barrage of effects, in the body will have a DIV has been scrolling, from right to left, and then this div is absolulte, it must be to the body plus relative, otherwise the iOS phone will appear horizontal scroll bar

Mobile development encounters the Pit