Mobile compatibility Highlights

JQM Click once to trigger multiple events

JQuery Mobile will enhance our original HTML page, for which it has its own features. Your HTML page did not follow this feature to cause your JS script to execute multiple times. This transformation
1. Use the following code to wrap up a page you think of
<div data-role= "page" ></div>
2. Put your JS in the top div.
So jquerympbile will not be your JS execution twice.

-------------------------------------------------------------

1.-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba (255,255,255,0) is used to set the orange box that appears when you click on a webpage on Android to be transparent

2. Grasping finger coordinates
Usually when the Touchstart or Touchmove event occurs, we take the value E.touches[0].pagex, E.touches[0].pagey but when the Touchend event occurs, E.changedtouches[0].pagex, E.changedtouches[0].pagey; Although the difference between them is very small, there will be a lot of problems with this point oh.


3. Using Touchend and other events, click Mask (Mask layer) will be dianchuan to the following this is my former son to do a function time to meet the problem toss a long, trapped inside big bug!!!!!
The specific situation, such as the title said, the use of mobile phone events on the mask layer on the click, will click on the label below, if it is a tag, will jump and so on.
So if you want to use mobile phone events, you can write something like this.
Document.body.addEventListener (' Touchstart ', function (e) {
if (e.target.classname = = = ' Mask ') {//If the point is a matte layer, the action to perform the mask layer disappears, and then at the global level (note that the global, because it is tied to the body), blocks the default event.
Isclose ();
E.preventdefault ();
}
}, False);


Sadly, I met a more disgusting, so did not work!!!!
Toss for a long time found that the following is an IFRAME tag, through clicking on it, will open a dialog box.
Well, it can only be hidden (it's not possible to put an IFRAME on it). It's settled, it's comfortable.


4. Bind the Click event to body or document.documentelement on the phone, invalid
If the point is on a mask layer (mask), there is no content. You will find that you do not have any effect, direct disregard. But after you bind an event to a tag, you write a binding to the Mask event, and then write a console.log (' AA ') if you don't do any actual things, and you'll find that you can use it again.
In addition, the best way to deal with this kind of problem is to use the above touch event, combined with Preventdefault (), because I hate hack.


5. Hide the address bar by default
Window.scrollto (0,1) This triggers scrolling one pixel to hide the address bar.
AddEventListener (' Load ', function () {
var hideurlbar = function () {
Window.scrollto (0, 1);
};
SetTimeout (Hideurlbar, 0);
}, False);


6. Avoid forgotten attribute values
Window.innerheight refers to the actual display of the screen at the current height window.pageyoffset similar to scrolltop effect


7. Bug on Android above input


On Android, when the input element is clicked, the keyboard is aroused, and a false input element is found to be around, floating, and very influential.
There is a more feasible way is if you this element ID is the user, then that element ID name will be so #fake-user, more than one fake-so you set some style on this element in the CSS, it seems that the same element you are more consistent does not affect the appearance of the


8. Flash on Android Super awesome, cover all things


To try it:


1. General modification of the Wmode value of the method


2. Place the flash element in the IFRAME and adjust the index value of the object itself or the obscured


3. Place the flash element in the IFRAME and insert an IFRAME that is absolutely positioned to cover the flash and adjust the index value


4. Put the masked object into the IFRAME and adjust the index
Well, if you have any good idea, beg to introduce!!!!
It is said that there is no flash (but can be installed) on the native 2.3


9. How do I display vertical screen writing style for mobile phone?
This is for the iphone vertical screen, the maximum width of 320px style


@media screen and (max-width:320px) {
H1 Span:nth-child (1) {display:inline;}
}


This is for the iphone horizontal screen, the minimum width of 321px style

@media screen and (min-width:321px)
{
H1 Span:nth-child (2) {display:inline;}
}


Detailed Introduction: The HTTP://WWW.THECSSNINJA.COM/CSS/IPHONE-ORIENTATION-CSS


Ten. Pointer-events
Pointer-events mainly has auto and none two values. It is mainly used to make a click of the function that you want to click, do not want to click to make it invalid (that is, the following article said click Range Maximization).
Http://www.qianduan.net/css3-pointer-event-description.html


11. Prevent dialing and prevent e-mails
In general, when you click on a number of numbers on a mobile browser, you will recognize the phone number, dial out, avoid this trouble, add this meta tag, <meta content= "Telephone=no" name= "format-detection"/ , avoid sending emails similar to <meta content= "Email=no" name= "Format-detection"/>


12. Turn off input auto initial capital letter
The input element has a new autocapitalize attribute, which can be turned off by specifying autocapitalize= ' off ' to turn off the default initial capitalization of the keyboard.




13. Use the History object of window to simulate returning to the previous page
Window.history.go ( -1); Window.history.back ();


Group Experience Summary:
1. How many versions are required for mobile Web development?
In China to do mobile web, the general need to do a few sets of output WAP (Nokia machine), UCWeb 7.9 (no JS), the individual effects of Android development, Apple's I series of rich applications
2. CSS properties not supported by the phone


position:fixed; (need to use JS to simulate)
According to other people test said: ITouch IPhone IPad Android 2.2 2.3 does not support overflow:scroll; IOS5 supports this attribute.
Mobile iOS device CSS compatibility set
According to my experience in a year or so of mobile phone project, Apple products (Iphone,ipad) to CSS3 this piece of support is the best, unlike the Android newspaper bug very much, and more inexplicable, so there is the I series of rich applications, Android series basic applications such a said. But Apple it must also have some of its own compatibility issues, we need to pay attention to, below I do some of their own summary, will be constantly updated.
First, textarea this label, with the default style
-webkit-appearance:none; With this property, you can cancel


The For property of the label does not work
In particular, we generally set the For property on the label, it points to an ID, and then a little label, corresponding to the relevant setting of the ID, such as input tags, to improve the user experience, but I recently found that the iphone does not support this property, whether it is 4 or 5.
have done similar things before, did not find this problem, and now the code and the same as before, for can be used, good ah?! Later discovered is because the original label above has been bound to the OnClick event, so just triggered, did not appear this bug, the following is the solution.
<label for= "test" onclick= "" ><input type= "checkbox" id= "Test"/>test</label>
It would be nice to add an empty onclick event to the label like this.




Three. Safari will Blink (in the group) using translate related properties
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
Http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform

Mobile compatibility Highlights