Problems with the mobile side

<span id="Label3"></p><p style="display: none;"><p style="display: none;">Https://github.com/AlloyTeam/Mars<br>Https://github.com/hoosin/mobile-web-favorites</p></p>Cross-domain issues<p><p>The mobile browser is also a browser, in the AJAX call external API when there is a cross-domain problem, this time can let the backend plus two HTTP headers</p></p><pre><pre><span style="color: #000000;">Access-control-allow-origin "*" access-control-allow-headers "Origin, x-requested-with, content-type, Accept"</span></pre></pre><p><p>The first header avoids Cross-domain issues, and the second header makes it easy for Ajax requests to set configuration items such as Content-type</p></p><p><p></p></p>Zepto problems encountered during use<p><p>Zepto source code has 14 modules, and the official website provides the standard version inside only 7 modules! And it doesn't include touch modules that are important for mobile development (providing support for touching events)!<br>So my advice is not to download it from the official website, but to build a version of the source code from Github, so you can pick the right module for yourself, and here are some of the modules that I know</p></p> <ul> <ul> <li><strong>Polyfill,zepto,detect,event,ajax,form,fx</strong> These 7 are the modules included in the Standard Edition</li> <li><strong>fx_methods</strong> with this module, several methods such as. show () hide () can support animations, such as<code>.show(‘fast‘)</code></li> <li><strong>Data</strong> provides complete support for THE. data () method, stored as a memory object like JQuery</li> <li><strong>Assets</strong> Remove the IMG element and do some special processing to clean up the memory</li> <li><strong>selector</strong> more selector support, which will be mentioned later</li> <li><strong></strong> Touch event support, such as tap events</li> </ul> </ul><p class="First"><p class="First">Do not use the Click event with a tap event</p></p><p><p>The Click event has a delay of 200~300 ms, and in order to respond faster, it is best to use the tap event provided by zepto, the so-called Tap event consists of Touchstart event + Touchmove + Touchend event Encapsulation</p></p><p class="First"><p class="First">Zepto support for CSS selectors is far less than jquery</p></p><p><p><code>:text :checkbox :first</code>wait, There's a very common selector in jQuery, zepto not supported! For the simple reason, JQuery supports CSS selectors through its own sizzle engine, and Zepto is an interface directly from the browser <code>document.querySelectorAll</code> . This interface only supports standard CSS selectors, and those mentioned above belong to the JQuery selector extension, so take a closer look at this page and notice the Selectors.</p></p><p><p>The selector module mentioned above, if it has this module, can support <strong>some</strong> of the jQuery selector extensions, listed Below:</p></p> <ul> <ul> <li>: Visible:hidden</li> <li>: selected:checked</li> <li>:p arent</li> <li>: First:last:eq</li> <li>: Contains:has</li> </ul> </ul><p class="First"><p class="First">Dimension calculation of elements</p></p><p><p>Zepto No. innerheight (). Outerwidth () etc four methods, secondly, its. height ()/.width () method is also imperfect, for <code>display:none</code> the elements, the calculated aspect are 0</p></p><p><p>Why jquery can calculate the size of the elements of display:none, viewing the source can be found that the original jquery will first set its CSS style to</p></p><pre><pre><span style="color: #800000;"></span></pre></pre><p><p>After calculating aspect and then recovering</p></p><p class="First"><p class="First">Defects of the Prop method</p></p><p><p>Think that using the following code can be implemented to set a text box to Read-only</p></p><pre><pre><span style="color: #0000ff;">true</span>)</pre></pre><p><p>It turns out that only the following can Work:</p></p><pre><pre><span style="color: #0000ff;">true</span>)</pre></pre><p><p>Then why does jquery use the above sentence can also work, look at the source code to find the reason is very simple that is</p></p><pre><pre><span style="color: #000000;">Jquery.each ([ </span>"tabIndex"<span style="color: #000000;">, </span>"readOnly"<span style="color: #000000;"> </span>, "maxLength"<span style="color: #000000;"> </span>, " CellSpacing "<span style="color: #000000;">, </span>" cellpadding "<span style="color: #000000;">, </span>" RowSpan "<span style="color: #000000;">, </span>" ColSpan ",<span style="color: #000000;"> </span>"usemap"<span style="color: #000000;">, </span>"frameborder"<span style="color: #000000;">, </span>"contenteditable"<span style="color: #000000;"></span><span style="color: #0000ff;">function</span> <span style="color: #000000;">() { </span>this<span style="color: #0000ff;"></span><span style="color: #0000ff;"></span><span style="color: #000000;">;});</span></pre></pre><p class="First"><p class="First">Use the Fadein () method instead of the Show method</p></p><p><p>Zepto. show () animations are simple to implement, with no high-width changes, but to gradually change the transparency from 0 to 1</p></p><p><p>If there is no fx_mehods module, The. show () method does not support animation, but with this module, animation support is a little bit of a problem, so it is recommended to use The. FadeIn () method Instead. Show ()</p></p>CSS 3 Filters<pre><pre><span style="color: #800000;">-webkit-filter:blur (5px) grayscale (. 5) opacity (0.66) hue-rotate (100deg);</span></pre></pre><p><p></p></p>Cross-fade<pre><pre><span style="color: #800000;">Background-image:-webkit-cross-fade (url ("logo1.png"), URL ("logo2.png"), 50%);</span></pre></pre><p><p></p></p>Iphone5 Media Query<pre><pre>@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {/* iPhone 5 or IPod Touch 5th generation */}</pre></pre><p><p>Use media queries to provide different boot images:</p></p><pre><pre><span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">= "startup-568h.png"</span> <span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">= "apple-touch-startup-image"</span> <span style="color: #ff0000;">Media</span> <span style="color: #0000ff;">= "(device-height:568px)"</span> <span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span> <span style="color: #800000;"></span> <span style="color: #ff0000;">href</span><span style="color: #0000ff;">= "startup.png"</span> <span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">= "apple-touch-startup-image"</span> <span style="color: #ff0000;"> Sizes</span><span style="color: #0000ff;">= "640x920"</span> <span style="color: #ff0000;"> media</span><span style="color: #0000ff;">= "(device-height:480px)"</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p>Remove the Voice input button on the Andriod<pre><pre><span style="color: #800000;"></span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> none</span>}</pre></pre><p><p></p></p>Mobile-HTML5 input Date does not support placeholder issues<p><p>The placeholder support for input type date is problematic because the browser will add the DatePicker module for this type of input, and it does not seem necessary to support placeholder. The purpose of using placeholder on input type date is to give the user more accurate input of the date format, DatePicker will not display placeholder text on IOS</p></p><p><p>The solution is simple, first make its type text, at this time support placeholder, when touch or focus, use JS switch to trigger the DatePicker function</p></p><pre><pre><span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">placeholder</span><span style="color: #0000ff;">= "Date"</span> <span style="color: #ff0000;"> class</span><span style="color: #0000ff;">= "textbox-n"</span> <span style="color: #ff0000;"> type</span><span style="color: #0000ff;">= " Text "</span> <span style="color: #ff0000;"> onfocus</span><span style="color: #0000ff;">=" (this.type= ' Date ') "</span><span style="color: #ff0000;"> ID</span><span style="color: #0000ff;">=" date "</span><span style="color: #0000ff;">></span></pre></pre><p><p></p></p>Mobile End HTML5 Audio AutoPlay failure problem<p><p>Due to the automatic play of the audio or video in the Web page, users will cause some problems or unnecessary traffic consumption, so the Apple system and Android system will usually prohibit the automatic play and use JS trigger play, must be triggered by the user to play</p></p><p><p>The solution is very simple, first through the user Touchstart touch, trigger play and pause (the audio starts to load, the back with JS again operation is no Problem)</p></p><pre><pre><span style="color: #0000ff;">function</span> <span style="color: #000000;">() { document.getelementsbytagname (</span>' audio ') [0<span style="color: #000000;">].play (); document.getElementsByTagName (</span>' audio ') [0<span style="color: #000000;">].pause ();});</span></pre></pre><p><p></p></p>Small details of the Touchmove event<p><p>Usually we do.</p></p><pre><pre><span style="color: #0000ff;">function</span> <span style="color: #000000;">() { </span><span style="color: #008000;">//</span><span style="color: #008000;">... code</span>});</pre></pre><p><p>If the middle code needs to deal with a lot of things, fps (fps represents the number of screen refreshes per second, when the parameter becomes low, will cause the screen card, delay Effect) will drop affect the Cheng slip, and if changed to the following this will be much faster (in fact, you understand the JS scope chain will be clear principle Interested to see my other blog post in the introduction to)</p></p><pre><pre><span style="color: #0000ff;">function</span> <span style="color: #000000;">() { setTimeout</span>() (<span style="color: #0000ff;">function</span><span style="color: #000000;">( ) () {</span><span style="color: #008000;">//</span><span style="color: #008000;">.... code</span> },0<span style="color: #000000;">);});</span></pre></pre><p><p></p></p>Prevent users from selecting text<pre><pre><span style="color: #800000;">-webkit-user-select:none</span></pre></pre><p><p></p></p>Prevent IOS from popping up various action windows<pre><pre><span style="color: #800000;">-webkit-touch-callout:none</span></pre></pre><p><p></p></p>Prevent IOS from identifying long string numbers for phones<pre><pre><span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">= "telephone=no"</span> <span style="color: #ff0000;"> name</span><span style="color: #0000ff;">= "format-detection"</span><span style="color: #0000ff;">/> </span></pre></pre><p><p></p></p> <ul> <ul> <li><p>To make the device browse the Web page when the number does not enable the phone function (different device interpretation, ITouch Click the number to save the contact, the IPhone to make a call), ignoring the number on the page is recognized as a phone number.</p></li> <li><p>If you need to enable the phone feature will telephone=yes, if there is Google Maps on the page, iTunes and YouTube link will open the corresponding program components on the iOS device.</p></li> </ul> </ul>Don't let Android phone recognize mailbox<pre><pre><span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">= "email=no"</span> <span style="color: #ff0000;"> name</span><span style="color: #0000ff;">= "format-detection"</span><span style="color: #0000ff;">/ ></span></pre></pre><p><p></p></p>Animation Flash white problem during animation<p><p>Use the CSS3 animation as much as possible with 3D acceleration, which makes the animation smooth. Animated Flash in the process can be hidden through Backface-visibility.</p></p><pre><pre><span style="color: #800000;">-webkit-transform-style:preserve-3d;</span> <span style="color: #008000;">/*</span> <span style="color: #008000;">sets how inline elements are rendered in 3D space: reserved 3D</span> <span style="color: #008000;">*/</span> <span style="color: #800000;">-webkit-backface-visibility:hidden;</span> <span style="color: #008000;">/*</span> <span style="color: #008000;">(sets whether the back side of the element being converted is visible when facing the User: hidden)</span> <span style="color: #008000;">*/</span></pre></pre><p><p></p></p>Font bold inconsistencies appear on the screen<p><p>The font size is reset when the iOS browser is flat, set <code>text-size-adjust</code> to <code>none</code> solve problems on ios, but the desktop version of Safari's font scaling is invalidated, so the best option is <code>text-size-adjust</code> to do so <code>100%</code> .</p></p><pre><pre><span style="color: #800000;">-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;</span></pre></pre><p><p></p></p>Pseudo Class: active in effect<p><p>For a CSS pseudo <code>:active</code> -class to take effect, you only need to give the document <code>touchstart</code> a binding or <code>touchend</code> event, as shown below:</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">a</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Color</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">#000</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">a:active</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Color</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">#fff</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Herf</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=foo</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Bar<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Script</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">Document.addeventlistener (</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">'</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">Touchstart</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">'</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">,</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">function</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">(){},</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">false</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">);</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Script</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p>Problems with the mobile side</p></p></span>