Mobile front-end development platform summary (ios, Android)

First we look at some of the private meta tags webkit kernel, these meta tags play a very important role in the development of webapp

<Meta content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0" name = "viewport" /> to force the width of the device of the document holder 1: 1, and the maximum width of the document is the ratio of 1.0, and does not allow the user clicks on the screen to zoom in; particular attention is to set up content in multiple properties + space must use a semicolon to separate, if not standard will not work.

<Meta content = "yes" name = "apple-mobile-web-app-capable" /> safari iphone private meta tag apparatus, which represents: full-screen mode allows browsing

<Meta content = "black" name = "apple-mobile-web-app-status-bar-style" /> iphone private tag, the status bar of the iphone safari top of its specified style <meta content = "telephone = no "name =" format-detection "/> tells the device to ignore the digital identification page for the phone number

1. h5 page has a very boring question is, when the input box at the bottom, click on the soft keyboard input box is blocked.

// can be solved as follows

var oHeight = $ (document) .height (); // browser's current height

$(window).resize(function(){

　　if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); }

});

2. input of the placeholder text position will be biased on the situation:

　　The PC equals the height line-height setting can be aligned, move to upper end remains, is provided to resolve line-height: normal;

3. Modify unsightly clicked in highlight effect moving end, the iOS and Android are valid:

　　*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

4. Zepto solution through point

(1) introducing fastclick.js, add the following code page js

　　window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false );

5. Pull down the scroll bar Caton, slow

　　body { -webkit-overflow-scrolling:touch; overflow-scrolling: touch; }

6. prohibit copy, select the text

　　Element { -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }

7. iphone and ipad at the default input box shadow

　　Element{ -webkit-appearance:none; }

Translucent gray mask when the touch element 8. ios and android

　　Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }

9. Fillet bug

Some Android phone failure rounded
Solution: background-clip: padding-box ;

10. The background color of the status bar at the top

11. Desktop icon

12. The mobile terminal HTML5 audio autoplay failures

document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });

13.js processing img tag to load the picture fails, the default image

　　If img tag is a small amount, you can use this: img onerror event of

14.CSS forced not wrap, the extra characters display an ellipsis

{White-space: nowrap; // force the text does not wrap; text-overflow: ellipsis; // Text overflow ellipsis; overflow: hidden; // overflow partially hidden;}

Mobile front-end development platform summary (ios, Android)

Guess you like