"Go" web mobile end some common knowledge

1. Remove the default style of A,input in the mobile browser (translucent gray matte shadow)

A,button,input,optgroup,select,textarea {    -webkit-tap-highlight-color:rgba (0,0,0,0);/* Remove A, The blue outer border and gray translucent background when input and button are clicked */}

2. Prohibit long press A,img label Long press the menu bar appears

A, img {    -webkit-touch-callout:none;/* Prohibit long press link and picture popup menu */}

3. Ellipsis

CSS single line. test{    width:300px;    Overflow:hidden;    text-overflow:ellipsis;  /* When the string exceeds the specified length, the ellipsis is displayed */    white-space:nowrap;} Multiple lines, without JS, using-webkit's private property,-webkit-line-clamp: Value number, for a few lines. test{    Overflow:hidden;    text-overflow:ellipsis;    Display:-webkit-box;    -webkit-line-clamp:2;    -webkit-box-orient:vertical;}

4.swiper plug-in (recalculation of displacements when the screen rotates or changes)

Observer:true,observeparents:true, applies the  observe to the parent element of the Swiper. When the parent element of the swiper changes, such as the Window.resize,swiper update. Swiper.update (true);        Recalculate the displacement of the wrapper

5. Mobile-side fonts

iOS system default Chinese font is Heiti sc default English font is Helvetica default number font is Helveticaneue no Microsoft Ya Black font android system default Chinese font is droidsansfallback default English and digital font is droid Sans no Microsoft ya Black font winphone system default Chinese font is Dengxian (founder etc line body) default English and digital font is SEGOE no Microsoft ya Black font// The use of the system default font to achieve the visual effect with the use of Microsoft Ya Black font no obvious difference each phone system has its own default font, and does not support Microsoft YA black without the need to define the Chinese font, using the system default English fonts and digital fonts can use Helvetica, Three systems support Body{font-family:helvetica;}

6.CSS3 @font-face your own defined Web fonts into your Web page

Online Conversion font://https://www.fontsquirrel.com/tools/webfont-generator

@font-face {    font-family: ' Singlemaltaregular ';              /* Name *    /Src:url ('.. /fonts/singlemalta-webfont.eot ');       /* IE9 Compat Modes *    /Src:url ('.. /fonts/singlemalta-webfont.eot? #iefix ') format (' Embedded-opentype '),/    * IE6-IE8 *       /url ('.. /fonts/singlemalta-webfont.woff ') format (' Woff '),/     * Modern Browsers *    /url ('.. /fonts/singlemalta-webfont.ttf ') format (' TrueType '),/     * Safari, Android, IOS *    /url ('.. /fonts/singlemalta-webfont.svg#singlemaltaregular ') format (' SVG ');   /* Legacy IOS */    font-weight:normal;    Font-style:normal;} Call body{font-family: ' Singlemaltaregular ';}

7. Mobile Click Screen generates 200-300 MS Latency response (with touch event)

The reason for this is how the browser needs to determine the quick click, when the user clicks an element on the screen, such as a jump link <a href= "#" ></a>, where the browser captures the click First, However, the browser does not determine whether the user is simply clicking on the link or double-clicking on the section area for zooming. Therefore, after capturing the first click, the browser will hold for a period of time t, if the user does not make the next click in the t time interval, then the browser will do the click Jump link processing, if the user has a second click, The jump is disabled and the zoom operation is performed on the page of that section. So how much does this time interval t have? Under iOS Safari, it's about 300 milliseconds. This is the origin of the delay. The consequences of the user simply click on the page, the page takes a while to respond, give the user a sense of slow experience, for the web Developer, the page JS capture Click event callback function processing, requires 300ms before it takes effect, also indirectly lead to affect the processing of other business logic.

8. Pseudo-Elements change the default style of the number type input box

Input[type=number]::-webkit-textfield-decoration-container {    background-color:transparent;    } Input[type=number]::-webkit-inner-spin-button {     -webkit-appearance:none;} Input[type=number]::-webkit-outer-spin-button {     -webkit-appearance:none;} WebKit the color value of the form input box placeholder input::-webkit-input-placeholder{color: #AAAAAA;} Input:focus::-webkit-input-placeholder{color: #EEEEEE;}

9. Disable the selection of text for iOS and Android users

. Css{-webkit-user-select:none}

10. Simulate button hover effect, activate active effect of mobile CSS

. Btn-blue:active{background-color: #357AE8;} Compatibility ios5+, partial Android 4+, Winphone 8 to be fully compatible, you can control the class name of the button by binding Ontouchstart and Ontouchend

11. Events and styles for screen rotation

Judging the phone screen status: Window.addeventlistener ("Onorientationchange" in window? "Orientationchange": "Resize", function () {    if (window.orientation = = = | | window.orientation = = 0) {        alert (' Vertical screen Status! ');    }    if (window.orientation = = = | | window.orientation = = -90) {        alert (' Horizontal screen state! ');    }}, False);

/mobile browser generally support window.orientation This parameter, through this parameter can determine whether the phone is in a horizontal screen or vertical screen state. /*css Horizontal Screen Reminder */#transverse {Position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba ( 0,0,0,0.8) URL (/images/transvers.png) no-repeat Center center;background-size:50% Auto;} @media all and (Orientation:landscape) {    #transverse {display:block;}} @media all and (orientation:portrait) {    #transverse {display:none;}}

12.audio elements and video elements do not play automatically in iOS and Andriod

$ (' HTML '). One (' Touchstart ', function () {    audio.play ()})

<!--
1. Currently only ios7+, winphone8+ support AutoPlay
2. Airplay-enabled devices (e.g. speaker, Apple TV) playback
X-webkit-airplay= "true"
3. Playback video not full screen, ios7+, winphone8+ support, some android4+ support (including Huawei, Xiaomi, Meizu)
Webkit-playsinline= "true"
-
<video x-webkit-airplay= "true" webkit-playsinline= "true" preload= "Auto" autoplay src= "/http" ></video>

13. Eliminate Transition splash screen

. css{/* sets how embedded elements are rendered in 3D space: Reserved 3d*/-webkit-transform-style:preserve-3d;/* (Sets the back of the element that is being converted is visible when facing the user: hidden) */- Webkit-backface-visibility:hidden;}

14. Cancel input under iOS, enter the default capitalization of the initial English letter

<input autocapitalize= "Off" autocorrect= "off"/>

15.android 2.3 Bug

@-webkit-keyframes need to end with 0% start 100%, 0% percent can not be removed
After and before pseudo classes cannot use animation animation
Border-radius does not support% units
Translate percent notation and scale together can result in invalidation, such as-webkit-transform:translate ( -50%,-50%) scale (-0.5, 1)

16.android 4.x Bug

Samsung Galaxy S4 in-band browser does not support Border-radius abbreviations while setting Border-radius and background colors, the background color will overflow to the fillet part of the phone (such as Samsung), a link support mouse: visited event, This means that after the link has been accessed, the text becomes purple Android cannot play multiple audio simultaneously

17.Android 4.2.x Background Color Overflow

The need is to use background-clip:padding-box; to fix. test{    Background-clip:padding-box;}

18.border-radius compatible notation

. foo {    width:100px;    height:100px;    border:5px solid blue;    border-top-left-radius:999px; /* Upper left corner */    border-top-right-radius:999px;/* upper right corner */    border-bottom-right-radius:999px;/* Lower    right corner */ border-bottom-left-radius:999px; /* Lower left corner */    border-radius:999px;    Background-color: #ccc;    Background-clip:padding-box;}

19. How to block the default touch events for Windows Phone

Winphone The default Touch event event using E.preventdefault is not valid The current workaround is to use the style to disable Html{-ms-touch-action:none;} /* Disable Winphone Default Touch event */

20. Sliding screen frame (suitable for slide screen, left and right slide screen and so on to switch page effect)

Slip.js    https://github.com/peunzhang/slip.jsiSlider.js  https://github.com/peunzhang/ Isliderfullpage.js  https://github.com/peunzhang/fullpageswiper.js  http://www.swiper.com.cn/

21.iscroll.js

Solve the page does not support elastic scrolling, does not support fixed problems ~ To achieve the drop-down refresh, slide screen, zoom and other functions ~ The latest version has been updated to 5.0 official website: http://cubiq.org/iscroll-5

22. Fix iOS fixed location problem (there are minor flaws that will scroll to the bottom), the middle is the absolute layout

function Ontouchmove (e) {    e.preventdefault ();    E.stoppropagation ();}; function onfocus (e) {    this.main.style.position = ' absolute ';    if (/iphone|ipad|ipod/i.test (navigator.useragent)) {        inputMessageBox.style.position = "absolute";        $HTML. Animate ({scrolltop:viewheight}); Height of intermediate content    };    Document.body.addEventListener (' Touchmove ', Ontouchmove, false);} function OnBlur (e) {    this.main.style.position = ' fixed ';    Document.body.removeEventListener (' Touchmove ', ontouchmove);}

23. Disable copying and selecting text

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

24. Using the mask layer when you bring a search box to the top of some browsers, swiping down will quickly appear blank

. mask{    position:fixed;    width:100%;    height:200%;        Height to high    left:0;    right:0;    top:0;    Bottom;    Opacity:1    background-color: #111;} This way, when you bring a search box to the top of some browsers, swiping down will quickly appear blank (the height of the search box at the top of the browser) all high highs can solve these bugs

25.meta Label

1.<meta name= "apple-mobile-web-app-capable" content= "yes" > if content is set to yes,web the app will run in full-screen mode, otherwise not. The default value for content is no, which indicates normal display. You can use the read-only property window.navigator.standalone to determine whether a Web page is displayed in full-screen mode. Compatibility: IOS 2.1 +2.<meta name= "Apple-mobile-web-app-status-bar-style" content= "blank" > This meta tag will not work unless you first use apple-mobile-web-app-capable to specify full-screen mode. Set the style of the Web app's status bar (the top bar of the screen) if content is set to default, the status bar is displayed correctly. If set to blank, the status bar will have a black background. If set to Blank-translucent, the status bar appears as black translucent. If set to default or blank, the page appears below the status bar, where the status bar occupies the upper part, and the page occupies the lower part, which does not obscure or obscure the other. If set to Blank-translucent, the page fills the screen, where the top of the page is obscured by the status bar (which overrides the 20px height of the page, while the Retina screen for iphone4 and ITOUCH4 is 40px). Defaults are default values. Starts or disables the phone number in the auto-identify page. 3.<meta name= "format-detection" content= "Telephone=no" >4.<meta name= "format-detection" content= "Email=no" > Disable browser magnification font 15.<meta name= "Wap-font-scale" content= "no" >uc browser private properties//Set screen orientation to horizontal or vertical <meta name= " Screen-orientation "content=" Portrait|landscape ">//settings are full screen, yes indicates Force browser full screen <meta name=" Full-screen "content=" Yes >//the scroll bar is not scaled, the horizontal scroll bar does not appear when set to Yes. <meta name= "ViewpOrt "content=" Uc-fitscreen=no|yes "/>//Night mode disable to disable night mode <meta name=" Nightmode "content=" enable|disable "/ >//Disable the UC browser's no diagram mode <meta name= "Imagemode" content= "Force"/>//app mode, using the application This application mode, the page says the default full screen, prohibit the long press menu, No cleaning, standard typesetting, and mandatory picture display. <meta name= "Browsermode" content= "Application"/>qq browser private properties//Set screen orientation to horizontal or vertical <meta name= "X5-orientation" Content= "Portrait|landscape"/>//setting is full screen, yes indicates Force browser full screen <meta name= "X5-fullscreen" content= "true"/>//app mode <meta name= "X5-page-mode" content= "app"/><!--windows Phone Click No highlight--><meta name= " Msapplication-tap-highlight "content=" no "> Add to Main screen (Apple IOS Safari) <!--enable WEBAPP app full screen mode, this will only open in full screen when you save as desktop app, In the browser will not full screen--><meta name= "apple-mobile-web-app-capable" content= "yes"/><!--save a page to the desktop when the app title-->< Meta name= "Apple-mobile-web-app-title" content= "title" ><!--Save a page to the desktop using this image as the desktop icon, the size and the same on the iphone, is 57*57px-- ><link rel= "Apple-touch-icon" href= "Custom_icon.png" ><!--start diagram, use only one 114*114 image to--><link reL= "apple-touch-icon-precomposed" href= "Startup/apple-touch-icon-114x114-precomposed.png"/> Avoid Baidu transcoding <meta http-equiv= "Cache-control" content= "No-siteapp"/>

13.data URI scheme is defined in the RFC2397

The data URI scheme is defined in RFC2397 to embed some small data directly into a Web page, eliminating the need to load it from an external file. Currently, the data URI scheme supports the following types: data:, Text data data:text/plain, text data data:text/html,html code DATA:TEXT/HTML;BASE64, Base64 encoded HTML code DATA:TEXT/CSS,CSS code data:text/css;base64,base64 encoded CSS code data:text/javascript,javascript code data: TEXT/JAVASCRIPT;BASE64,BASE64 encoded JavaScript code DATA:IMAGE/GIF;BASE64,BASE64 encoded GIF image data data:image/png;base64, Base64 encoded PNG image data DATA:IMAGE/JPEG;BASE64,BASE64 encoded JPEG image data data:image/x-icon;base64, The base64 encoded icon image data writes the contents of the image file directly in the HTML file, which has the advantage of saving an HTTP request. The downside is that the browser does not cache this image. such as background: #f0f5f9 URL (Data:image/png;base64,ivborw0kggoaaaans ... SUQMCC) no-repeat 50% 50%

"Go" web mobile end some common knowledge