Mobile-side development frequently encountered problems and solutions

<span id="Label3"></p><p><p><span style="color: #ff0000; font-size: 16px"><strong>1. Slide left and right left white on mobile side</strong></span><br><span style="font-size: 16px">If this is the case, check your CSS for any use of position:relative or position:absolute, I often encounter this problem when I do the page, 100% is the Reason.</span><br><span style="font-size: 16px">Solution: just set the width of html,body to 100%,overflow:hidden.</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">2.iOS Click events No effect of several scenarios</span></strong></span><br><span style="font-size: 16px">1) Add Cursor:pointer for css;</span><br><span style="font-size: 16px">2) dynamically added elements to use on bind Event.</span><br><span style="font-size: 16px">3) whether the query refers to the JS file</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">3. Set animation animation Android No effect</span></strong></span><br><span style="font-size: 16px">Adding-webkit-prefixes to keyframes, animation, and transform are indispensable</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">4. Set div height as a percentage does not work</span></strong></span><br><span style="font-size: 16px">Check htnl,body{height:100%}</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">5.ios using the on binding Click event occurs when the binding parent tag flashes</span></strong></span><br><span style="font-size: 16px">Give the element a style like This:-webkit-tap-highlight-color:rgba (0,0,0,0);</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">6. Resolve front-end mobile device incompatibility issues</span></strong></span><br><span style="font-size: 16px">Use @media to set the size of the device, set the CSS in dimensions, in the following format:</span><br><span style="font-size: 16px">@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {}</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">7.iphone Mobile Click event Latency 300MS Solution</span></strong></span><br><span style="font-size: 16px">1) prohibit scaling: <meta name= "viewport" content= "width=device-width, user-scalable=no" ></span><br><span style="font-size: 16px">2) reference fastclick.js file, window.addeventlistener ("load", function () {fastclick.attach (document.body);}, false);</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">8. Preventing Point Penetration events</span></strong></span><br><span style="font-size: 16px">Adds a return false to the Click event for the upper element;</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">9.iPhone the Non-a-label using $.fn.on delegate binding has no Effect.</span></strong></span></p></p><p><p> <span style="font-size:16px"> processing scheme, Add the cursor property </span> <br> <span style="font-size:16px" to the label. event{< span> <br> <span style="font-size:16px"> cursor:pointer; </span> <br> <span style="font-size:16px">} </span> <br> <span style="font-size:16px"> <strong> <span style="color: #ff0000">10. Mobile side uses IFRAME to load Cross-domain Web pages "refused to display in a frame becuase it set ' x-frame-options ' to ' sameorigin" </span> </strong> </span> <br> <span style="font-size:16px"> Assume that the Cross-domain page you are using now is the mobile website "http://wap.10086.cn/" If you use the PC address "http://www.10086.cn/" This problem does not occur. </span> <br> <span style="font-size:16px" reason: for security reasons, some websites block calls to external iframe, such as mobile web wap above, and pc side is not blocked. < span> <br> <span style="font-size:16px"> solution: </span> </span></span></p></p><p><p><span style="font-size: 16px">Find solutions on the web, but not really useful. There are several ways to be considered feasible by netizens, but I do not use here, see http://stackoverflow.com/questions/20498831/ Refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin</span><br><span style="font-size: 16px">If the front-end support, this should be no solution, after all, the page to visit is not their own. The only way to do this is to get Back-office colleagues to help open the site using the default Browser.</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">WebView Sumsung Phone using margin-left:auto;margin-right:auto; to achieve horizontal centering causes the width setting of the center element to expire, and the width automatically fills the center Area.</span></strong></span></p></p><p><p><span style="font-size: 16px">Solution: position + left distance 50%+ half of the left offset element width</span><br><span style="font-size: 16px">. center{</span><br><span style="font-size: 16px">position:relative;</span><br><span style="font-size: 16px">left:50%;</span><br><span style="font-size: 16px">margin-left:-100px;</span><br><span style="font-size: 16px">}</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">12.webview Sumsung defined height does not work</span></strong></span></p></p><p><p><span style="font-size: 16px">Solution: forced to use padding prop height</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">13.webview Sumsung Margin-left does not work</span></strong></span></p></p><p><p><span style="font-size: 16px">Solution: forced to use Padding-left</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">WebView ISO input width to 0 or display area</span></strong></span><br><span style="font-size: 16px">The solution is "width:0px;z-index:-1;border:none"</span></p></p><p><p> <span style="font-size:16px"> <strong> <span style="color: #ff0000">15. Multiple lines omitted </span> </strong> </span> <br> <span style="font-size:16px"> Single-line omit comparison simple </span> <br> <span style="font-size:16px">white-space:nowrap; </span> <br> <span style="font-size:16px">text-overflow:ellipsis; </span> <br> <span style="font-size:16px">overflow:hidden; </span> <br> <span style="font-size:16px"> appropriate WebKit browser or mobile (mostly webkit Kernel) browser </span> <br> <span style="font-size:16px" display:-webkit-box; < span> <br> <span style="font-size:16px">-webkit-line-clamp:2; </span> <br> <span style="font-size:16px">-webkit-box-orient:vertical; </span> <br> <span style="font-size:16px"> overflow:hidden; </span> </span></p></p><p><p> <span style="font-size:16px"> <strong> <span style="color: #ff0000">16. an issue encountered while using the Flexbox Layout. </span> </strong> </span> <br> <span style="font-size:16px"> When using flexbox, there was a strange problem, that is, the picture on the left side of the container is set to a fixed width, which will still deform. (and This problem only occurs in the case of dynamic fetching of data, the static page does not exist this Problem) </span> <br> <span style="font-size:16px" the analysis found that the reason is that: depending on actual number of titles to be taken, block will stretched and left image squeezed cause deformation. < span> <br> <span style="font-size:16px"> <strong> solution One </strong>: before the left-hand width, right-adaptive, and now to the left and right in percent to represent the Width. </span> <br> <span style="font-size:16px"> <strong> solution Two </strong>: you can set <strong> flex-shrink:0 because the Flexbox layout is used </strong>, the item does not shrink when there is insufficient space. or, Use the <strong> flex-basis </strong> property to set the spindle space that the project Occupies. </span> <br> <span style="font-size:16px"> summary: <strong> when using the Flexbox layout and the usual left fixed width right adaptive layout when there is a small difference, that is, can not only set the width, Use Flex-basis to set the spindle space </strong> that the project Occupies. </span></span></p></p><p><p><span style="color: #ff0000; font-size: 16px"><strong>17. Picture size varies, handling Problems.</strong></span><br><span style="font-size: 16px">According to the actual situation, each news cover picture is the size, the length and width ratio is different, but all must put in the same size block display, how to ensure that they look not deformed, the effect is good display.</span><br><span style="font-size: 16px">Scenario One: use a background image display, set the picture to the background of a fixed-size div block, and then set the Background-position:center so that the main content in the middle of the picture can be displayed, but the disadvantage is that some high-resolution images will show only a small part of the Middle.</span><br><span style="font-size: 16px">Scenario Two: The block is fixed to a length-width overflow:hidden, and then the picture width width:100%,margin-top:-15px (this offset can be determined according to the actual situation). Of course, This can only solve most of the situation, can not solve all situations.</span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">18. Text display is not complete problem</span></strong></span></p></p><p><p><span style="font-size: 16px">At the beginning of the PC side with the Google browser simulation debugging is not a problem, but after running on the phone, text display is not full of problems</span><br><span style="font-size: 16px">Use REM to set the height and font of the block, but REM is relative to the root element to calculate the font size, not all devices on the root elements are the same size, due to these errors caused in some mobile browsers appear on the text beyond the Display.</span></p></p><p><p> <span style="font-size:16px" reason: because chrome has set a minimum font size of 12px, which results in the use rem areas such as width, height, margin, and so on, although 10px is html, default still calculated 12px. so actual will be large. it advisable to only on size. < span> <br> <span style="font-size:16px"> solution: first set the font size of the root Element. secondly, the width-height unit is changed to px; </span> <br> <span style="font-size:16px"> html{font-size:10px}. title{font-size:2rem;} </span> <br> <br> <span style="font-size:16px"> <strong> <span style="color: #ff0000">19. lag, Slow when pulling the scroll bar </span> </strong> </span> <br> <span style="font-size:16px"> body {</span> <br> <span style="font-size:16px">- webkit-overflow-scrolling:touch; </span> <br> <span style="font-size:16px"> overflow-scrolling:touch; </span> <br> <span style="font-size:16px">} </span> <br> <span style="font-size:16px">android3+ and ios5+ The new property that supports CSS3 is overflow-scrolling </span> </span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">20. Mobile-click 300ms Latency</span></strong></span><br><span style="font-size: 16px">300ms acceptable, But because of the problem of 300ms, we have to Solve. 300MS caused the user experience is not very good, to solve this problem, we generally on the mobile side with the tap event to replace the click Event.</span><br><span style="font-size: 16px">Recommended two js, one is fastclick, the other is Tap.js</span><br><span style="font-size: 16px">For 300ms latency, see: http://thx.github.io/mobile/300ms-click-delay/</span></p></p><p><span style="font-size: 16px"><span style="font-size: 16px"><strong><span style="color: #ff0000">21. Mobile Endpoint penetration problem</span></strong></span></span><br><span style="font-size: 16px">the <span style="font-size: 16px">cases are as follows:</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><div id= "haorooms" > Nod event Test </div></span></span><br> <br><span style="font-size: 16px"><span style="font-size: 16px"><a href= "www.baidu.net" >www.baidu.com</a></span></span><br> <br><span style="font-size: 16px">the <span style="font-size: 16px">Div is an absolutely positioned mask, and Z-index is higher than A. A tag is a link in the page where we bind the tap event to the Div:</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">$ (' #haorooms '). on (' tap ', function () {</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">$ (' #haorooms '). Hide ();</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">});</span></span><br> <br><span style="font-size: 16px">the <span style="font-size: 16px">Div normally disappears when we click on the mask, but when we click on the mask on the a tag, we find that a link is triggered, which is called a Point-through event. </span></span><br><span style="font-size: 16px"><span style="font-size: 16px">reason:</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">Touchstart earlier than touchend earlier than Click. That is, the Click Trigger is a delay, the time is about 300ms, that is, we tap to hide after the mask, when the click has not been triggered, after 300ms due to mask hidden, Our click triggered to the following a Link. </span></span><br><span style="font-size: 16px"><span style="font-size: 16px">solution:</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">(1) Use the touch event as much as possible to replace the click Event. For example, use the Touchend event (recommended). </span></span><br><span style="font-size: 16px"><span style="font-size: 16px">(2) using Fastclick,https://github.com/ftlabs/fastclick</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">(3) block The click of a tag with Preventdefault</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">(4) delay a certain amount of time (300ms+) to handle the event (not recommended)</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">(5) The above generally can be resolved, it is not possible to replace the click Event. </span></span><br><span style="font-size: 16px"><span style="font-size: 16px">Here's A look at the Touchend event, as Follows:</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">$ ("#haorooms"). on ("touchend", function (event) {</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">Event.preventdefault ();</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"> });</span></span></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">22. about IOS system, Chinese Input method in english, there may be a one-sixth space between letters</span></strong></span><br><span style="font-size: 16px">can be removed by regular:</span><br><span style="font-size: 16px">This.value = This.value.replace (/\u2006/g, ");</span></p></p><p><p> <span style="font-size:16px"> <strong> <span style="color: #ff0000">23.ios Setting the input button style is overridden by the default style </span> The </strong> </span> <br> <span style="font-size:16px" is resolved as follows: < span> <br> <span style="font-size:16px">input, </span> <br> <span style="font-size:16px">textarea {</span> <br> <span style="font-size:16px"> border:0; </span> <br> <span style="font-size:16px">-webkit-appearance:none; </span> <br> <span style="font-size:16px">} </span> <br> <span style="font-size:16px"> Set default style to none </span> </span></p></p><p><p> <span style="font-size:16px"> <strong> <span style="color: #ff0000">24. input keyboard events in iOS keyup, keydown, KeyPress support is not very good </span> </strong> </span> <br> <span style="font-size:16px"> The problem is, when using input search to do fuzzy search, enter keywords in the keyboard, Queries through ajax, then returns the data, and then uses the keyword red for the returned Data. Using input to monitor the keyboard KeyUp event, in the Android phone browser is possible, but in the iOS phone browser red very slow, with input methods, not immediately corresponding KeyUp events, only after the deletion can be appropriate! </span> <br> <span style="font-size:16px"> workaround: </span> <br> <span style="font-size:16px"> You can use HTML5 Oninput event instead of KeyUp </span> <br> <span style="font-size:16px"><input type= "text" id= "testinput" > </span> <br> <span style="font-size:16px"><script type= "text/javascript"; </span> <br> <span style="font-size:16px"> document.getElementById (' testinput '). addeventlistener (' input ', function (e) { </span> <br> <span style="font-size:16px"> Varvalue = e.target.value; </span> <br> <span style="font-size:16px">}); </span> <br> <span style="font-size:16px"></script> </span> <br> <span style="font-size:16px" and then achieves a similar keyup effect! < span></span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">25. disable copying and selecting text</span></strong></span><br><br><span style="font-size: 16px">Element {-webkit-user-select:none;</span><br><span style="font-size: 16px">-moz-user-select:none;</span><br><span style="font-size: 16px">-khtml-user-select:none;</span><br><span style="font-size: 16px">user-select:none;</span><br><span style="font-size: 16px">}</span><br><span style="font-size: 16px"><strong><span style="color: #ff0000">26. Press and hold the page for a long time to flash back</span></strong></span><br><span style="font-size: 16px">element {</span></p></p><p><p><span style="font-size: 16px">-webkit-touch-callout:none;</span></p></p><p><p><span style="font-size: 16px">}</span><br><span style="font-size: 16px"><strong><span style="color: #ff0000">Translucent gray matte on 27.ios and touch elements under Android</span></strong></span><br><span style="font-size: 16px">Element {</span><br><span style="font-size: 16px">-webkit-tap-highlight-color:rgba (255,255,255,0)</span><br><span style="font-size: 16px">}</span><br><br><span style="font-size: 16px">Set the alpha value to 0 to remove the translucent gray matte, note: The transparent property value is not valid under Android.</span><br><span style="font-size: 16px">The following article has detailed introduction, address: Http://www.jb51.net/post/phone_web_ysk</span></p></p><p><span style="font-size: 16px"><span style="font-size: 16px"><strong><span style="color: #ff0000">28.active compatible processing is pseudo class: active invalidation</span></strong></span></span><br><span style="font-size: 16px"><span style="font-size: 16px">method one: Body Add Ontouchstart</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><body ontouchstart= "" ></span></span><br> <br><span style="font-size: 16px"><span style="font-size: 16px">method Two: js to document BIND Touchstart or Touchend event</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><style></span></span><br><span style="font-size: 16px"><span style="font-size: 16px">a {</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">color: #000;</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"> }</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">a:active {</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">color: #fff;</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"> }</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"></style></span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><a Herf=foo >bar</a></span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><script></span></span><br><span style="font-size: 16px"><span style="font-size: 16px">document.addeventlistener (' touchstart ', function () {},false);</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"></script></span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><strong><span style="color: #ff0000">29. problem with font resizing when rotating the screen</span></strong></span></span><br><span style="font-size: 16px"><span style="font-size: 16px">html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">-webkit-text-size-adjust:100%;</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">}</span></span><br><span style="font-size: 16px"><span style="font-size: 16px"><strong><span style="color: #ff0000">30. Fillet Bug</span></strong></span></span><br><span style="font-size: 16px"><span style="font-size: 16px">some Android phone rounded corners fail</span></span><br><span style="font-size: 16px"><span style="font-size: 16px">background-clip:padding-box;</span></span></p><p><p> <span style="font-size:16px"> <strong> <span style="color: #ff0000">31. top status bar background color </span> </strong> </span> <br> Span style= "font-size:16px" ><meta name= "apple-mobile-web-app-status-bar-style" content= "black"/> <br> <span style="font-size:16px"> description: </span> <br> <span style="font-size:16px" this meta tag will not work unless you first specify full-screen mode with apple-mobile-web-app-capable. < span> <br> <span style="font-size:16px" if content is set to default, the status bar displayed correctly. blank, will have a black background. blank-translucent, appears as black translucent. default or page below bar, where occupies upper part, and lower which does not obscure other. fills screen, top of obscured by (which overrides 20px height page, while retina screen for iphone4 itouch4 40px). defaults are values. < span></span></span></p></p><p><p><span style="font-size: 16px"><strong><span style="color: #ff0000">32. Setting up the cache</span></strong></span><br><span style="font-size: 16px"><meta http-equiv= "cache-control" content= "no-cache"/></span><br><br><span style="font-size: 16px">Mobile pages are usually cached after the first load, <strong>and then each refresh uses the cache instead of going back to the server to send the request</strong> . If you do not want to use the cache, you can set No-cache.</span></p></p><p><p><span style="font-size: 16px"></span></p></p><p><p>Mobile-side development frequently encountered problems and solutions</p></p></span>